/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */
@import '../../styles/variables.css';

:root {
  --country-code-selector-font-family: var(--default-font-family);
  --country-code-selector-border-radius: var(--default-border-radius);
  --country-code-selector-border-color: #d1d3d8;
  --country-code-selector-label-color: #808080;
  --country-code-selector-label-font-family: var(--default-font-family);
  --country-code-selector-label-font-size: var(--default-font-size-small);
  --country-code-selector-height: 46px;
  --country-code-selector-color: #414752;
  --country-code-selector-menu-outer-z-index: var(--z-index-dropdown);
  --country-code-selector-hover-border-color: color-mod(
    var(--country-code-selector-border-color) shade(15%)
  );
  --country-code-selector-focus-border-color: var(--color-primary);
  --country-code-selector-focus-outline-color: color-mod(
    var(--country-code-selector-focus-border-color) alpha(20%)
  );
  --country-code-selector-transition-duration: calc(
    var(--default-transition-duration) / 1.5
  );
}

/* Styles */
.container {
  all: initial;
  font-family: var(--country-code-selector-font-family);
  color: var(--country-code-selector-color);

  & :global(.Select) {
    transition: box-shadow var(--country-code-selector-transition-duration)
      ease-in;
    border-radius: var(--country-code-selector-border-radius);

    & :global(.Select-control) {
      border: 0;
      border-radius: var(--country-code-selector-border-radius);
      box-shadow: inset 0 0 0 1px var(--country-code-selector-border-color);
      height: var(--country-code-selector-height);
      position: relative;
      z-index: calc(var(--z-index-input) + 10);
      transition: box-shadow var(--country-code-selector-transition-duration)
        ease-in;

      &:hover {
        box-shadow: inset 0 0 0 1px
          var(--country-code-selector-hover-border-color);
      }
    }

    & :global(.Select-input) {
      height: var(--country-code-selector-height);
      padding: 0 var(--default-padding);

      & > input {
        line-height: 26px;
        height: 26px;
        padding: var(--default-padding-small) 0;
      }
    }

    & :global(.Select-noresults) {
      text-align: center;
      padding: 8px 16px;
      line-height: 24px;
    }

    & :global(.Select-menu-outer) {
      border: 1px solid var(--country-code-selector-border-color);
      box-shadow: 0 2px 3px 0 color-mod(#000 alpha(20%));
      overflow: hidden;
      z-index: var(--country-code-selector-menu-outer-z-index);
    }

    & :global(.Select-placeholder) {
      line-height: var(--country-code-selector-height);
      padding: 0 var(--default-padding);
      user-select: none;
    }

    & :global(.Select-arrow-zone) {
      width: 32px;
      padding-right: 10px;
    }

    & :global(.Select-value) {
      padding: 0 var(--default-padding) !important;

      & .option {
        padding-left: 0;
        padding-right: 24px;
      }
    }

    & :global(.Select-value-label) {
      padding: var(--default-padding-small) 0;
      display: block;
    }

    & :global(.Select-option) {
      padding: 6px var(--default-padding);
      color: var(--country-code-selector-color);
    }

    &:global(.is-focused) {
      box-shadow: 0 0 0 3px var(--country-code-selector-focus-outline-color);

      & :global(.Select-control) {
        box-shadow: inset 0 0 0 1px
          var(--country-code-selector-focus-border-color) !important;

        & .optionLabel {
          opacity: 0.5;
        }
      }

      &:global(.is-open) {
        box-shadow: 0 0 0 3px var(--country-code-selector-focus-outline-color);
        border-radius: var(--country-code-selector-border-radius)
          var(--country-code-selector-border-radius) 0 0;

        & :global(.Select-control) {
          box-shadow: inset 0 0 0 1px
            var(--country-code-selector-focus-border-color);
          border-radius: var(--country-code-selector-border-radius)
            var(--country-code-selector-border-radius) 0 0;
        }
      }
    }

    &:global(.is-pseudo-focused) {
      & :global(.Select-control) {
        & .optionLabel {
          opacity: 1;
        }
      }
    }

    &:global(.is-disabled) {
      & :global(.Select-control) {
        background-color: #fff;
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: inset 0 0 0 1px var(--country-code-selector-border-color) !important;
      }
    }

    &:global(.has-value) {
      & :global(.Select-input) {
        padding-left: 52px;
      }
    }
  }
}

.disabled {
  & .label {
    cursor: not-allowed;
  }
}

.label {
  all: initial;
  @mixin no-select;
  color: var(--country-code-selector-label-color);
  font-family: var(--country-code-selector-label-font-family);
  font-size: var(--country-code-selector-label-font-size);
  line-height: 1.4;
  display: inline-block;
  margin-bottom: calc(var(--default-padding-small) / 2);
  cursor: pointer;
}

.option {
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  padding-left: 16px;
  padding-right: 40px;
}

.optionFocused {
  background-color: #f0f1f4;
  color: var(--country-code-selector-color);
}

.optionSelected {
  background-color: var(--color-primary);
  color: white;
}

.optionFlag {
  flex: 0 0 auto;
  height: 24px;
  line-height: 1em !important;
  margin: 0 !important;
  display: inline-block;
}

.optionLabel {
  flex: 1 1 auto;
  padding: 0 8px 0 10px;
  overflow: hidden;
  @mixin flex-fix;
  @mixin text-overflow-ellipsis;
}

.optionCountry {
  font-size: var(--default-font-size);
  @mixin text-overflow-ellipsis;
}

.optionCode {
  font-size: var(--default-font-size);
  flex: 0 0 auto;
  font-weight: 500;
}