/* button LIGHT and states */

.button--light {
  @apply border border-solid border-secondary-400 bg-secondary-100 text-secondary-950;

  box-shadow: inset 1px 1px theme(backgroundColor.white);

  &:disabled {
    @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
  }

  & .button__icon {
    color: theme(textColor.secondary.900);
  }
}

.button--light-hover:hover {
  @apply hover:bg-secondary-200;
}

.button--light-focus:focus {
  @apply focus:bg-secondary-200;

  & .button__label {
    color: theme(textColor.secondary.900) !important;
  }
}

.button--light-active:active {
  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900;

  box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);

  & .button__label {
    color: theme(textColor.secondary.900) !important;
  }
}
