@import '../../../scss/styles.scss';

@layer payload-default {
  .localizer-button {
    display: flex;
    align-items: center;
    white-space: nowrap;
    display: flex;
    padding-inline-start: base(0.4);
    padding-inline-end: base(0.2);
    background-color: var(--theme-elevation-100);
    border-radius: var(--style-radius-s);

    &__label {
      color: var(--theme-elevation-500);
    }

    &__chevron {
      .stroke {
        stroke: currentColor;
      }
    }

    &__current {
      display: flex;
      align-items: center;
    }

    button {
      color: currentColor;
      padding: 0;
      font-size: 1rem;
      line-height: base(1);
      background: transparent;
      border: 0;
      font-weight: 600;
      cursor: pointer;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }

    @include small-break {
      &__label {
        display: none;
      }
    }
  }
}