buttons.css

/*
BUTTONS
----------------------------------------------------------------*/

.btn {
  --background: theme('colors.blue-60');
  --text: #fff;
  --text-hover: #fff;
  --text-active: #e4e4e4;
  --focused: color(theme('colors.blue-70'));
  --focused-shadow: color(theme('colors.blue-60') alpha(30%));
  --hover: color(theme('colors.blue-60') shade(10%));
  --active: theme('colors.blue-70');
  --disabled-bg: color(theme('colors.blue-60') tint(80%) saturation(- 60%));
  --disabled-color: color(theme('colors.blue-60') saturation(- 90%));

  @apply rounded font-bold inline-block relative;
  background-color: var(--background);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  border: 0;

  padding: 0.5em 1em;
  transition: box-shadow 0.2s ease-out;

  &:focus,
  &:hover,
  &:active {
    text-decoration: none;
    color: var(--text-hover);
  }

  &:focus {
    outline: 0;
    background-color: var(--focused);
    box-shadow: var(--focused-shadow) 0 0 0 3px;
  }

  &:hover {
    background-color: var(--hover);
  }

  &:active {
    background-color: var(--active);
    color: var(--text-active);
  }

  &.dark {
    --text: theme('colors.blue-90');
    --background: theme('colors.blue-40');
    --hover: color(theme('colors.blue-40') tint(30%));
    --focused: theme('colors.blue-30');
    --active: color(theme('colors.blue-40') shade(20%));

    &[disabled] {
      --disabled-color: color(theme('colors.blue-80') saturation(- 30%));
      --disabled-bg: color(
        theme('colors.blue-40') saturation(- 50%) alpha(60%)
      );
    }
  }

  &[disabled] {
    box-shadow: none;
    cursor: default;
    background-color: var(--disabled-bg);
    color: var(--disabled-color);
    pointer-events: none;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.btn-secondary {
  --text: theme('colors.blue-80');
  --text-hover: theme('colors.blue-80');
  --text-active: theme('colors.blue-80');
  --background: theme('colors.grey-20');
  --focused: theme('colors.grey-30');
  --focused-shadow: color(theme('colors.grey-40') alpha(10%));
  --hover: color(theme('colors.grey-20') shade(5%));
  --active: color(theme('colors.grey-30') shade(10%));
  --disabled-bg: color(theme('colors.grey-60') tint(80%));
  --disabled-color: color(theme('colors.grey-60') saturation(- 10%));

  &.dark {
    --background: theme('colors.grey-30');
    --hover: color(theme('colors.grey-30') tint(30%));
    --focused: theme('colors.grey-20');
    --active: color(theme('colors.grey-30') shade(20%));

    &[disabled] {
      --disabled-color: color(theme('colors.blue-80') saturation(- 30%));
      --disabled-bg: color(
        theme('colors.grey-60') saturation(- 10%) alpha(80%)
      );
    }
  }
}

.btn-primary {
  --background: theme('colors.green-60');
  --focused: theme('colors.green-70');
  --focused-shadow: color(theme('colors.green-50') alpha(30%));
  --hover: color(theme('colors.green-60') shade(10%));
  --active: theme('colors.green-70');
  --disabled-bg: color(theme('colors.green-60') tint(80%) saturation(- 60%));
  --disabled-color: color(theme('colors.green-60') saturation(- 90%));

  &.dark {
    --background: theme('colors.green-40');
    --hover: theme('colors.green-30');
    --focused: theme('colors.green-30');
    --active: color(theme('colors.green-40') shade(20%));

    &[disabled] {
      --disabled-color: color(theme('colors.green-80') saturation(- 30%));
      --disabled-bg: color(
        theme('colors.green-40') saturation(- 50%) alpha(60%)
      );
    }
  }
}

.btn-danger {
  --background: theme('colors.red-60');
  --focused: theme('colors.red-70');
  --focused-shadow: color(theme('colors.red-50') alpha(30%));
  --hover: color(theme('colors.red-60') shade(10%));
  --active: theme('colors.red-70');
  --disabled-bg: color(theme('colors.red-60') tint(80%) saturation(- 60%));
  --disabled-color: color(theme('colors.red-60') saturation(- 90%));

  &.dark {
    --background: theme('colors.red-40');
    --hover: theme('colors.red-30');
    --focused: theme('colors.red-30');
    --active: color(theme('colors.red-40') shade(20%));

    &[disabled] {
      --disabled-color: color(theme('colors.red-80') saturation(- 30%));
      --disabled-bg: color(theme('colors.red-40') saturation(- 50%) alpha(60%));
    }
  }
}

.btn-link {
  --background: transparent;
  --text: theme('colors.blue-60');
  --text-hover: theme('colors.blue-70');
  --text-active: theme('colors.blue-80');
  --disabled-color: color(theme('colors.blue-60') saturation(- 90%));
  transition: none;
  position: relative;

  &:hover,
  &:active,
  &:focus {
    background-color: transparent;
    box-shadow: none;
    text-decoration: underline;
  }

  &:active {
    top: 1px;
  }

  &[disabled] {
    background-color: transparent;
    opacity: 0.8;
    text-decoration: none;
  }

  &.btn-link--danger {
    --text: theme('colors.red-60');
    --text-hover: theme('colors.red-70');
    --text-active: theme('colors.red-80');
  }

  &.dark {
    --text: theme('colors.blue-40');
    --background: transparent;
    --text-hover: theme('colors.blue-30');

    &[disabled] {
      --disabled-color: color(theme('colors.blue-40') saturation(- 90%));
    }
  }
}