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

@layer payload-default {
  .popup-button-list {
    --list-button-padding: calc(var(--base) * 0.5);
    --popup-button-list-gap: 3px;
    display: flex;
    flex-direction: column;
    text-align: left;
    [dir='rtl'] &__text-align--left {
      text-align: right;
    }
    &__text-align--left {
      text-align: left;
    }

    &__text-align--center {
      text-align: center;
    }
    [dir='rtl'] &__text-align--right {
      text-align: left;
    }
    &__text-align--right {
      text-align: right;
    }

    &__button {
      @extend %btn-reset;
      padding-left: var(--list-button-padding);
      padding-right: var(--list-button-padding);
      padding-top: calc(2px + var(--popup-button-list-gap) / 2);
      padding-bottom: calc(2px + var(--popup-button-list-gap) / 2);
      cursor: pointer;
      text-align: inherit;
      line-height: var(--base);
      text-decoration: none;
      border-radius: 3px;
      width: 100%;
      button {
        @extend %btn-reset;

        &:focus-visible {
          outline: none;
        }
      }

      &:hover,
      &:focus-visible,
      &:focus-within {
        outline: none;
        background-color: var(--popup-button-highlight);
      }
    }

    &__button--selected {
      background-color: var(--theme-elevation-150);
    }

    &__disabled {
      cursor: not-allowed;
      --popup-button-highlight: transparent;
      background-color: var(--popup-button-highlight);
      color: var(--theme-elevation-350);
      &:hover {
        --popup-button-highlight: var(--theme-elevation-50);
      }
    }
  }
}