@import '@/src/styles/utils/mixins';

.languageSelector {
  position: relative;

  .button {
    height: 36px;
    @include flex(row, center, center);
    border-radius: var(--base-border-radius);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
  }

  &.open .button, .button:hover {
    border: 1px solid var(--hr-color);

    .language {
      opacity: 1;
    }

    .popUpButton {
      opacity: 1;
    }
  }

  .icon {
    @include generatePxToRem(padding, 8);
  }

  .language {
    @include generatePxToRem(padding-right, 8);
    @include generatePxToRem(font-size, 14);
    font-weight: 600;
  }

  &:not(.hasIcon) .language {
    @include generatePxToRem(padding-left, 8);
  }

  .popUpButton {
    width: 12px;
    height: 13px;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.49451 1.30869L6 0.875L5.50548 1.30869L1.44053 4.87365L0.881031 5.36432H3.15598L6 2.87013L8.84402 5.36432H11.119L10.5595 4.87365L6.49451 1.30869Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.50549 12.4413L6 12.875L6.49452 12.4413L10.5595 8.87635L11.119 8.38568L8.84402 8.38568L6 10.8799L3.15598 8.38568L0.881034 8.38568L1.44053 8.87635L5.50549 12.4413Z' fill='white'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat;
    background-color: var(--lang-selector-primary-color);
    opacity: 0.4;
    @include generatePxToRem(margin-right, 10);
  }

  svg {
    width: 24px;
    height: 24px;
  }

  svg path {
    fill: var(--lang-selector-icon-color);
  }

  .options {
    position: absolute;
    top: 36px;
    left: 0;
    @include generatePxToRem(margin-top, 8);
    border-radius: var(--base-border-radius);
    border: 1px solid var(--hr-color);
    min-width: 8rem;
    z-index: 1000;
    background-color: var(--color-page-background);

    li {
      @include generatePxToRem(padding, 8 12 8 16);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      @include generatePxToRem(font-size, 14);
      font-weight: 600;
      letter-spacing: 0.01rem;
      line-height: 22px;

      color: var(--lang-selector-item-color);

      &:first-child {
        border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
      }

      &:last-child {
        border-radius: 0 0 var(--base-border-radius) var(--base-border-radius);
      }

      &.active {
        color: var(--primary-color);
      }

      &:hover {
        background-color: var(--lang-selector-item-hover-background-color);
      }
    }
  }
}
