import { hideVisually, transparentize } from 'polished';
import styled, { css } from 'styled-components';
import { getHoverColors, calculateFontSize } from '../../styles';
import { defaultThemeProp } from '../../theme';
const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation: { speed, timing }, 'font-size': fontSize, 'font-scale': fontScale, 'font-family': fontFamily, 'font-weight': fontWeight, palette, shadow: { focus: focusShadow }, spacing, 'border-radius': borderRadius, transparency }, components: { 'search-input': { 'border-radius': searchInputRadius } } } }) => {
    const hoverColor = getHoverColors(palette['primary-background']).background;
    const secondaryTextColor = transparentize(1 - transparency['transparent-2'], palette['foreground-color']);
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
      /* stylelint-disable no-descending-specificity */
      /* stylelint-disable no-duplicate-selectors */
      /* stylelint-disable selector-max-class */
      border-radius: inherit;

      .emoji-mart,
      .emoji-mart * {
        box-sizing: border-box;
        line-height: 1.15;
      }

      .emoji-mart {
        font-family: ${fontFamily};
        font-size: ${fontSizes.l};
        display: inline-block;
        color: ${palette['foreground-color']};
        border: 0.0625rem solid ${palette['border-line']};
        border-radius: inherit;
        background: ${palette['primary-background']};
      }

      .emoji-mart .emoji-mart-emoji {
        padding: calc(0.75 * ${spacing});
      }

      .emoji-mart-bar {
        border: 0 solid ${palette['border-line']};
      }
      .emoji-mart-bar:first-child {
        border-bottom-width: 0.0625rem;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }
      .emoji-mart-bar:last-child {
        border-top-width: 0.0625rem;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        ${!showFooter &&
        css `
          display: none;
        `}
      }

      .emoji-mart-anchors {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 calc(0.75 * ${spacing});
        line-height: 0;
      }

      .emoji-mart-anchor {
        position: relative;
        display: block;
        flex: 1 1 auto;
        color: ${secondaryTextColor};
        text-align: center;
        padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});
        overflow: hidden;
        transition: color calc(0.4 * ${speed}) ${timing['ease-out']};
        margin: 0;
        box-shadow: none;
        background: none;
        border: none;
      }
      .emoji-mart-anchor:focus {
        outline: 0;
      }
      .emoji-mart-anchor:hover,
      .emoji-mart-anchor:focus,
      .emoji-mart-anchor-selected {
        color: ${palette.interactive};
      }

      .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
        bottom: 0;
      }

      .emoji-mart-anchor-bar {
        position: absolute;
        bottom: calc(-0.375 * ${spacing});
        left: 0;
        width: 100%;
        height: calc(0.375 * ${spacing});
        background-color: ${palette.interactive};
      }

      .emoji-mart-anchors i {
        display: inline-block;
        width: 100%;
        max-width: calc(2.75 * ${spacing});
      }

      .emoji-mart-anchors svg,
      .emoji-mart-anchors img {
        fill: currentColor;
        height: calc(2.25 * ${spacing});
        width: calc(2.25 * ${spacing});
      }

      .emoji-mart-scroll {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 16.875rem;
        padding: 0 calc(0.75 * ${spacing});
        will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
      }

      .emoji-mart-search {
        padding: ${spacing};
        position: relative;
      }

      .emoji-mart-search input {
        font-size: ${fontSizes.l};
        color: ${palette['foreground-color']};
        display: block;
        width: 100%;
        padding: calc(0.625 * ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})
          calc(1.25 * ${spacing});
        border-radius: calc(${borderRadius} * ${searchInputRadius});
        border: 0.0625rem solid ${palette['border-line']};
        background-color: ${palette['primary-background']};
        outline: 0;
      }

      .emoji-mart-search input:hover {
        border-color: ${palette['foreground-color']};
      }

      .emoji-mart-search input,
      .emoji-mart-search input::-webkit-search-decoration,
      .emoji-mart-search input::-webkit-search-cancel-button,
      .emoji-mart-search input::-webkit-search-results-button,
      .emoji-mart-search input::-webkit-search-results-decoration {
        /*
          remove webkit/blink styles for <input type="search">
          via https://stackoverflow.com/a/9422689
        */
        -webkit-appearance: none;
      }

      .emoji-mart-search-icon {
        position: absolute;
        top: calc(1.875 * ${spacing});
        right: calc(2.25 * ${spacing});
        z-index: 2;
        border: none;
        background: none;
      }

      .emoji-mart-search-icon svg {
        fill: ${secondaryTextColor};
      }

      .emoji-mart-category .emoji-mart-emoji span {
        z-index: 1;
        position: relative;
        text-align: center;
        cursor: default;
      }

      .emoji-mart-category .emoji-mart-emoji:hover::before {
        z-index: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: ${hoverColor};
        border-radius: 100%;
      }

      .emoji-mart-category-label {
        z-index: 2;
        top: 0;

        /* stylelint-disable declaration-block-no-duplicate-properties */
        position: relative;
        position: -webkit-sticky;
        position: sticky;
        /* stylelint-enable declaration-block-no-duplicate-properties */
      }

      .emoji-mart-category-label span {
        display: block;
        width: 100%;
        font-weight: ${fontWeight['semi-bold']};
        padding: ${spacing} calc(0.25 * ${spacing});
        background-color: ${transparentize(0.05, palette['primary-background'])};
      }

      .emoji-mart-category-list {
        margin: 0;
        padding: calc(0.375 * ${spacing}) 0;
      }

      .emoji-mart-category-list li {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block;
      }

      .emoji-mart-emoji {
        position: relative;
        display: inline-block;
        font-size: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
      }

      .emoji-mart-emoji-native {
        /* stylelint-disable font-family-no-missing-generic-family-keyword */
        font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',
          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cspell:disable-line */
      }

      /* stylelint-enable font-family-no-missing-generic-family-keyword */
      .emoji-mart-category .emoji-mart-emoji:focus,
      .emoji-mart-category .emoji-mart-emoji-native:focus,
      .emoji-mart-skin:focus,
      .emoji-mart-search input:focus {
        outline: 0;
        border-color: transparent;
        box-shadow: ${focusShadow};
      }

      .emoji-mart-category .emoji-mart-emoji:focus,
      .emoji-mart-category .emoji-mart-emoji-native:focus {
        border-radius: 100%;
      }

      .emoji-mart-no-results {
        font-size: ${fontSizes.s};
        text-align: center;
        padding-top: 4.375rem;
        color: ${secondaryTextColor};
      }
      .emoji-mart-no-results-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
      .emoji-mart-no-results .emoji-mart-category-label {
        display: none;
      }
      .emoji-mart-no-results .emoji-mart-no-results-label {
        margin-top: 0.2em;
      }
      .emoji-mart-no-results .emoji-mart-emoji:hover::before {
        content: none;
      }

      .emoji-mart-preview {
        position: relative;
        min-height: 2.5rem;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .emoji-mart-preview-emoji {
        left: calc(1.5 * ${spacing});
      }

      .emoji-mart-preview-data {
        left: calc(8.5 * ${spacing});
        right: calc(1.5 * ${spacing});
        word-break: break-all;
        flex: 1;
      }

      .emoji-mart-preview-skins {
        position: absolute;
        right: calc(3.75 * ${spacing});
        text-align: right;
      }

      .emoji-mart-preview-skins.custom {
        right: calc(1.25 * ${spacing});
        text-align: right;
      }

      .emoji-mart-preview-name {
        font-size: ${fontSizes.s};
      }

      .emoji-mart-preview-shortname {
        font-size: ${fontSizes.xxs};
        color: ${secondaryTextColor};
      }
      .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
      .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
      .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
        margin-left: 0.5em;
      }

      .emoji-mart-preview-emoticon {
        font-size: ${fontSizes.xxs};
        color: ${secondaryTextColor};
      }

      .emoji-mart-title span {
        display: inline-block;
        vertical-align: middle;
      }

      .emoji-mart-title .emoji-mart-emoji {
        padding: 0;
      }

      .emoji-mart-title-label {
        color: ${secondaryTextColor};
        font-size: ${fontSizes.xxl};
        font-weight: ${fontWeight.normal};
      }

      .emoji-mart-skin-swatches {
        font-size: 0;
        padding: calc(0.25 * ${spacing}) 0;
        border: 0.0625rem solid ${palette['border-line']};
        border-radius: calc(1.5 * ${spacing});
        background-color: ${palette['secondary-background']};
      }

      .emoji-mart-skin-swatches.custom {
        font-size: 0;
        border: none;
        background-color: ${palette['secondary-background']};
      }

      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
        width: calc(2 * ${spacing});
        padding: 0 calc(0.25 * ${spacing});
      }

      .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {
        opacity: ${transparency['transparent-2']};
      }

      .emoji-mart-skin-swatch {
        display: inline-block;
        width: 0;
        vertical-align: middle;
        transition-property: width, padding;
        transition-duration: calc(0.5 * ${speed});
        transition-timing-function: ${timing['ease-out']};
      }

      .emoji-mart-skin-swatch:nth-child(1) {
        transition-delay: 0s;
      }
      .emoji-mart-skin-swatch:nth-child(2) {
        transition-delay: 0.03s;
      }
      .emoji-mart-skin-swatch:nth-child(3) {
        transition-delay: 0.06s;
      }
      .emoji-mart-skin-swatch:nth-child(4) {
        transition-delay: 0.09s;
      }
      .emoji-mart-skin-swatch:nth-child(5) {
        transition-delay: 0.12s;
      }
      .emoji-mart-skin-swatch:nth-child(6) {
        transition-delay: 0.15s;
      }

      .emoji-mart-skin-swatch.selected {
        position: relative;
        width: calc(2 * ${spacing});
        padding: 0 calc(0.25 * ${spacing});
      }

      .emoji-mart-skin-swatch.selected::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(0.5 * ${spacing});
        height: calc(0.5 * ${spacing});
        margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});
        background-color: ${palette['primary-background']};
        border-radius: 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity ${speed} ${timing['ease-out']};
      }

      .emoji-mart-skin-swatch.custom {
        display: inline-block;
        width: 0;
        height: 2.375rem;
        overflow: hidden;
        vertical-align: middle;
        transition-property: width, height;
        transition-duration: calc(0.5 * ${speed});
        transition-timing-function: ${timing['ease-out']};
        cursor: default;
      }

      .emoji-mart-skin-swatch.custom.selected {
        position: relative;
        width: 2.25rem;
        height: 2.375rem;
        padding: 0 calc(0.25 * ${spacing}) 0 0;
      }

      .emoji-mart-skin-swatch.custom.selected::after {
        content: '';
        width: 0;
        height: 0;
      }

      .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
        background-color: ${palette['primary-background']};
        border-radius: 10%;
      }

      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
        width: 2.25rem;
        height: 2.375rem;
        padding: 0 calc(0.25 * ${spacing}) 0 0;
      }

      .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {
        opacity: ${transparency['transparent-2']};
      }

      .emoji-mart-skin-text.opened {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        color: ${secondaryTextColor};
        font-size: ${fontSizes.xxs};
        padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});
        width: 6rem;
        height: 2.5rem;
        border-radius: 10%;
        background-color: ${palette['primary-background']};
      }

      .emoji-mart-skin {
        display: inline-block;
        width: 100%;
        padding-top: 100%;
        max-width: calc(1.5 * ${spacing});
        border-radius: 100%;
      }

      .emoji-mart-skin-tone-1 {
        background-color: #ffc93a;
      }
      .emoji-mart-skin-tone-2 {
        background-color: #fadcbc;
      }
      .emoji-mart-skin-tone-3 {
        background-color: #e0bb95;
      }
      .emoji-mart-skin-tone-4 {
        background-color: #bf8f68;
      }
      .emoji-mart-skin-tone-5 {
        background-color: #9b643d;
      }
      .emoji-mart-skin-tone-6 {
        background-color: #594539;
      }

      /* For screen readers only */
      .emoji-mart-sr-only {
        ${hideVisually}
      }

      /*
        https://github.com/missive/emoji-mart/issues/319
        https://github.com/missive/emoji-mart/pull/442
      */
      .emoji-mart-emoji-native {
        height: var(--emoji-size);
        width: var(--emoji-size);
        position: relative;
        display: inline-block;
        box-sizing: content-box;
        vertical-align: bottom;
      }

      .emoji-mart-emoji-native > span {
        position: absolute !important;
        top: 50%;
        left: 50%;
        height: initial !important;
        width: initial !important;
        transform: translate(-50%, -50%);
      }
    `;
});
StyledEmojiPicker.defaultProps = defaultThemeProp;
export default StyledEmojiPicker;
//# sourceMappingURL=EmojiPicker.styles.js.map