button.scss

.btn {
  --btn-padding: #{unit(3)} #{unit(5)};
  --btn-border: 1px solid var(--secondary-color);
  --btn-radius: 4px;

  position: relative;
  padding: var(--btn-padding);
  color: var(--btn-color, black);
  background: var(--btn-bg, white);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  white-space: nowrap;
  cursor: pointer;

  @each $type in $types {
    @include btn-color-with-state($type);
  }

  &-round {
    --btn-radius: 30px;
  }

  &-circle {
    --btn-padding: 0;
    --btn-radius: 50%;

    @include square(unit(11));
  }

  &.disabled {
    cursor: not-allowed;
  }

  &.loading {
    --btn-color: transparent;

    @include flex-center;

    &::before {
      @include circle(18px);
      position: absolute;
      content: "";
      background: none;
      border: 4px solid white;
      clip-path: inset(0 0 50% 0);
      transform: rotate(0);
      animation: spin 0.6s linear infinite;
    }
  }

  &-ghost {
    --btn-color: var(--btn-bg);
    --btn-border: 1px solid var(--btn-bg);

    background: transparent;
    transition: 0.3s;

    &:hover {
      --btn-color: white;

      background: var(--btn-bg);
    }
  }

  &-dashed {
    --btn-color: var(--btn-bg);
    --btn-border: 1px dashed var(--btn-bg);

    background: transparent;
  }

  &-link {
    --btn-color: var(--btn-bg);
    --btn-border: 0;

    background: transparent;
  }

  &-sm {
    --btn-padding: 0.25rem 0.5rem;

    font-size: 0.75rem;
  }
}

.btn-group {
  --btn-group-divider-color: var(--secondary-color-lighter);
  --btn-group-divider-length: 1px;

  display: inline-flex;

  .btn {
    border: calc(var(--btn-group-divider-length) / 2) solid
      var(--btn-group-divider-color);
    border-top: none;
    border-bottom: none;

    &:first-child {
      border-left: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-right: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
  }
}