@use '../theme/button.tokens' as button;
@use '../theme/spacing.tokens' as spacing;
@use '../theme/transitions.tokens' as transitions;

.pa-button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: button.$border-radius-button;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  outline: 0;
  transition:
    background-color transitions.$transition-hint,
    box-shadow transitions.$transition-hint,
    color transitions.$transition-hint;
  white-space: nowrap;

  a {
    color: inherit;
    &:hover {
      text-decoration: none;
    }
  }

  .pa-button-wrapper {
    display: inline-flex;
    align-items: center;
  }
  .pa-button-label {
    font-weight: button.$font-weight-button-label;
  }

  svg {
    display: block;
    fill: currentColor;
  }
  .pa-icon-text {
    margin-right: spacing.rhythm(1);
  }

  &.pa-button-icon {
    border-radius: button.$border-radius-button-icon;
  }

  &.pa-small {
    font-size: button.$font-size-button-small;
    height: button.$height-button-small;
    line-height: spacing.rhythm(3);
    padding: 0 button.$padding-sides-button-small;

    &.pa-button-icon {
      padding: button.$padding-button-icon-small;
    }
    &.pa-button-icon-text {
      padding-left: button.$padding-left-button-icon-text-small;
      padding-right: button.$padding-right-button-icon-text-small;
    }
  }

  &.pa-medium {
    font-size: button.$font-size-button-medium;
    height: button.$height-button-medium;
    line-height: spacing.rhythm(4);
    padding: 0 button.$padding-sides-button-medium;

    &.pa-button-icon {
      padding: button.$padding-button-icon-medium;
    }
    &.pa-button-icon-text {
      padding-left: button.$padding-left-button-icon-text-medium;
      padding-right: button.$padding-right-button-icon-text-medium;
    }
  }

  &.pa-large {
    font-size: button.$font-size-button-large;
    height: button.$height-button-large;
    line-height: spacing.rhythm(4);
    padding: 0 button.$padding-sides-button-large;

    &.pa-button-icon {
      padding: button.$padding-button-icon-large;
    }
    &.pa-button-icon-text {
      padding-left: button.$padding-left-button-icon-text-large;
      padding-right: button.$padding-right-button-icon-text-large;
    }
  }

  &.pa-regular {
    margin: -1px;
  }

  &:not(:disabled) {
    cursor: pointer;

    &.pa-primary {
      &.pa-solid {
        @include button.primary-solid();
      }

      &.pa-basic {
        @include button.primary-basic();
      }
    }

    &.pa-secondary {
      &.pa-solid {
        @include button.secondary-solid();
      }

      &.pa-basic {
        @include button.secondary-basic();
      }
    }

    &.pa-inverted {
      &.pa-solid {
        @include button.inverted-solid();
      }

      &.pa-basic {
        @include button.inverted-basic();
      }
    }

    &.pa-destructive {
      &.pa-solid {
        @include button.destructive-solid();
      }

      &.pa-basic {
        @include button.destructive-basic();
      }
    }

    @media (hover: hover) {
      &:hover {
        &.pa-solid {
          @include button.hover-box-shadow-solid();
        }

        &.pa-basic {
          @include button.hover-box-shadow-basic();
        }
      }
    }
  }

  &:disabled {
    &.pa-solid {
      @include button.disabled-solid();
    }

    &.pa-basic {
      @include button.disabled-basic();
    }

    &.pa-inverted {
      &.pa-solid {
        @include button.disabled-inverted-solid();
      }
      &.pa-basic {
        @include button.disabled-inverted-basic();
      }
    }
  }
}

.pa-dual-buttons,
.pa-modal .pa-modal-footer.pa-dual-buttons {
  display: flex;
  justify-content: space-between;

  pa-button {
    width: calc((100% - #{spacing.rhythm(2)}) / 2);

    .pa-button {
      width: 100%;
    }
  }
}