button {
  background-color: transparent;
  border: 0;
}

.stlms-btn {
  padding: 10px $spacing_32;
  border-radius: 6px;
  font-size: $font_size_sm;
  line-height: 20px;
  font-weight: $font_weight_medium;
  background: $primary;
  border: 1px solid $primary;
  color: $white !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  @include transition(all 0.3s ease-in-out);

  &:hover,
  &:focus {
    background: darken($primary, 10%);
  }

  &.stlms-btn-outline {
    background: transparent;
    border-color: $primary;
    color: $primary !important;

    &:hover {
      background: $primary;
      color: $white !important;
    }
  }

  &.stlms-btn-block {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    padding-left: $spacing_16;
    padding-right: $spacing_16;
  }

  &-light {
    background: $primary_light;
    border-color: $primary_light;

    &:hover,
    &:focus {
      background: darken($primary_light, 10%);
    }
  }

  &-dark {
    background: $primary_dark;
    border-color: $primary_dark;

    &:hover,
    &:focus {
      background: lighten($primary_dark, 4%);
    }
  }

  &-white {
    background: $white;
    border-color: $white;
    color: $black !important;

    &:hover,
    &:focus {
      background: lighten($white, 4%);
    }
  }

  &-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }
  }

  &-flate {
    padding: 8px 12px;
    background: transparent !important;
    border: 0;
    color: $primary !important;

    &:hover {
      background: rgba($primary, 0.1) !important;
    }

    &.hidden {
      display: none;
    }
  }

  &.stlms-next-wizard {
    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  &.stlms-check-answer {
    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  &.google-sign-in-btn {
    background: transparent;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: $black !important;
    border: 1px solid $gray_light;

    &:hover {
      background: rgba($gray_light, 0.2);
    }
  }
}