@use "../utils/colors.scss" as colors;

.button {
  transition: all 0.3s ease;
  border: 0.0625rem solid colors.$secondary !important;
  box-shadow:none;
  font-size: 18pt !important;
  &.is-rounded {
    border: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  &.button:focus {
    box-shadow: 0 0 0 0.125em colors.$secondary;
  }

  &.is-primary {
    background-color: colors.$primary;
    color: colors.$white;
    &.is-light {
      background-color: colors.$white;
      color: colors.$primary;
      border: 0.0625rem solid colors.$primary;
    }

    &.is-primary:hover {
      background-color: colors.$secondary;
      color: colors.$white;
      border: 0.0625rem solid colors.$secondary !important;
      &.is-light:hover {
        background-color: colors.$primary;
        color: colors.$white;
        border: 0.0625rem solid colors.$primary;
      }
    }

    &.is-primary:active {
      background-color: colors.$secondary;
      color: colors.$white;
      border: 0.0625rem solid colors.$secondary;
      &.is-light:active {
        background-color: colors.$primary;
        color: colors.$white;
        border: 0.0625rem solid colors.$primary;
      }
    }

    &.is-primary:focus:not(:active) {
      box-shadow: 0 0 0 0.125em colors.$secondary;
    }
  }
}
