.button {
  @apply inline-block px-4 py-2 rounded;

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

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

/* A compact button for use in lists where space is precious. */
.button-sm {
  @apply px-3 py-1 !important;
}

.button-primary {
  @apply bg-blue-500 text-white;

  &:hover {
    @apply bg-blue-600;
  }

  &:active {
    @apply bg-blue-700;
  }
}

.button-secondary {
  @apply bg-gray-300;

  &:hover {
    @apply bg-gray-400;
  }

  &:active {
    @apply bg-gray-500;
  }
}

.button-success {
  @apply bg-green-500 text-white;

  &:hover {
    @apply bg-green-600;
  }

  &:active {
    @apply bg-green-700;
  }
}

.button-login-github {
  @apply text-white;

  background-color: hsl(210, 12%, 28%);

  &:hover {
    background-color: hsl(210, 12%, 22%);
  }

  &:active {
    background-color: hsl(210, 12%, 16%);
  }
}

.button-login-gitlab {
  @apply text-white;

  background-color: hsl(19, 84%, 56%);

  &:hover {
    background-color: hsl(19, 84%, 48%);
  }

  &:active {
    background-color: hsl(19, 84%, 40%);
  }
}

/*
 * Applied in JavaScript when a long operation will be done when pressing
 * the button (such as logging in).
 */
.button-loading {
  @apply opacity-50 pointer-events-none;
}

@screen dark {
  .button-primary {
    @apply bg-blue-600;

    &:hover {
      @apply bg-blue-500;
    }

    &:active {
      @apply bg-blue-700;
    }
  }

  .button-secondary {
    @apply bg-gray-700;

    &:hover {
      @apply bg-gray-600;
    }

    &:active {
      @apply bg-gray-800;
    }
  }

  .button-success {
    @apply bg-green-600;

    &:hover {
      @apply bg-green-500;
    }

    &:active {
      @apply bg-green-700;
    }
  }
}
