.#{$CLASS_PREFIX}-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 8px 15px;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  box-sizing: border-box;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  &.default {
    // NOT_PALLETE
    border-color: #e3e5e6;
  }

  @each $generalClass, $color in $generalColors {
    &.#{$generalClass} {
      background: colorUsage($generalClass, "main");
      @if $generalClass != "warning" {
        color: white;
      }
      &:focus {
        outline: 0 !important;
      }
      &:focus,
      &:hover {
        background: colorUsage($generalClass, "main-light");
      }
      &:active {
        background: colorUsage($generalClass, "main-dark");
      }
    }
  }

  &.disabled {
    background: #f6f8f9 !important;
    color: #c6cacc !important;
    border-color: #f6f8f9 !important;
    user-select: none;
    cursor: unset;
  }

  &.outline {
    @each $generalClass, $color in $generalColors {
      &.#{$generalClass} {
        background: transparent;
        border-color: colorUsage($generalClass, "main");
        color: colorUsage($generalClass, "main");

        &:focus,
        &:hover {
          border-color: colorUsage($generalClass, "main-light");
          color: colorUsage($generalClass, "main-light");
        }
        &:active {
          border-color: colorUsage($generalClass, "main-dark");
          color: colorUsage($generalClass, "main-dark");
        }
      }
    }
  }

  &.dashed {
    border-style: dashed;
    @each $generalClass, $color in $generalColors {
      &.#{$generalClass} {
        background: transparent;
        border-color: colorUsage($generalClass, "main");
        color: colorUsage($generalClass, "main");

        &:focus,
        &:hover {
          border-color: colorUsage($generalClass, "main-light");
          color: colorUsage($generalClass, "main-light");
        }
        &:active {
          border-color: colorUsage($generalClass, "main-dark");
          color: colorUsage($generalClass, "main-dark");
        }
      }
    }
  }
}

.#{$CLASS_PREFIX}-btn-compact {
  padding-top: 3px;
  padding-bottom: 3px;
}

.#{$CLASS_PREFIX}-btn-link {
  color: #142f8f;
  background: transparent;
  padding: 0;
  border: none;
}

.#{$CLASS_PREFIX}-btn-subtle {
  color: #3e4345;
  background: transparent;
  padding: 0;
  border: none;
  &.#{$CLASS_PREFIX}-btn-link {
    color: #5e6366 !important;
  }
}