@use '../settings/index' as *;

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .5rem .75rem;
  border-radius: $border-radius;
  border: 1px solid transparent;
  font-family: $font-family;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;

  &:focus {
    outline: none;
    box-shadow: none;
  }

  &--primary {
    background: var(--brand-500);
    color: var(--text-on-brand);
    border-color: var(--brand-500);

    &:not([disabled]):not(.is-disabled):hover {
      background: var(--brand-700);
      border-color: var(--brand-700);
    }
  }

  &--secondary {
    background: var(--slate-500);
    border-color: var(--slate-500);
    color: var(--text-on-brand);

    &:not([disabled]):not(.is-disabled):hover {
      background: var(--slate-700);
      border-color: var(--slate-700);
    }
  }

  &--outline {
    background: transparent;
    color: var(--brand-500);
    border-color: var(--brand-500);

    &:not([disabled]):not(.is-disabled):hover {
      border-color: var(--brand-600);
      color: var(--brand-600);
    }
  }

  &--text {
    color: var(--text-primary);

    &:not([disabled]):not(.is-disabled):hover {
      color: var(--text-secondary);
    }

    &-primary {
      color: var(--brand-500);

      &:not([disabled]):not(.is-disabled):hover {
        color: var(--brand-600);
      }
    }

    &-secondary {
      color: var(--text-secondary);

      &:not([disabled]):not(.is-disabled):hover {
        color: var(--text-primary);
      }
    }
  }

  &--icon {
    background: transparent;
    color: var(--text-primary);
    padding: 0;

    &-primary {
      padding: 0;
      background: var(--brand-500);
      color: var(--text-on-brand);
      border-color: var(--brand-500);

      &:not([disabled]):not(.is-disabled):hover {
        background: var(--brand-700);
        border-color: var(--brand-700);
      }

    }

    &-secondary {
      padding: 0;
      background: var(--slate-500);
      border-color: var(--slate-500);
      color: var(--text-on-brand);

      &:not([disabled]):not(.is-disabled):hover {
        background: var(--slate-700);
        border-color: var(--slate-700);
      }
    }

    &-outline {
      padding: 0;
      background: transparent;
      color: var(--brand-500);
      border-color: var(--brand-500);

      &:not([disabled]):not(.is-disabled):hover {
        border-color: var(--brand-600);
        color: var(--brand-600);
      }

    }

    &-small {
      width: 1.75rem;
      height: 1.75rem;
    }

    &-medium {
      width: 2.25rem;
      height: 2.25rem;
    }

    &-large {
      width: 2.625rem;
      height: 2.625rem;
    }
  }

  &--small {
    padding: .375rem .625rem;
    font-size: .875rem;
  }

  &--medium {
    padding: .5rem .75rem;
    font-size: 1rem;
  }

  &--large {
    padding: .625rem 1rem;
    font-size: 1.125rem;
  }

  &:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
}