/*!*
 * @package   ats
 * @copyright Copyright (c)2011-2026 Nicholas K. Dionysopoulos / Akeeba Ltd
 * @license   GNU General Public License version 3, or later
 */

@use '../variables' as *;
@use 'sass:color';

$background: $teal !default;
$backgroundhover: color.adjust($background, $lightness: -10%) !default;

$fontcolor: $white !default;
$fonthover: $fontcolor !default;

@mixin button($name, $background, $backgroundhover, $fontcolor, $fonthover, $border: 1px solid $background) {
  &[class*=#{$name}] {
    background: $background;
    color: $fontcolor;
    border: $border;

    &:hover {
      background: $backgroundhover;
      color: $fonthover;
    }

    &:focus {
      background: $backgroundhover;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px $background;
    }
  }
}

@mixin ats_buttons
{
  a[class*=btn],
  button[class*=btn],
  span[class*=btn],
  input[type=submit][class*=btn] {
    display: inline-block;
    padding: .6em 1.2em;
    color: $white;
    background: $teal;
    border-radius: $border-radius;
    border: none;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      background: color.adjust($teal, $lightness: -10%);
    }

    &:focus {
      background: color.adjust($teal, $lightness: -10%);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px $teal;
    }

    // Button variations
    $ghost_bg: transparent;
    $ghost_bghover: color.adjust($teal, $lightness: 45%);

    $ghost_color: color.adjust($teal, $lightness: -10%);
    $ghost_colorhover: color.adjust($teal, $lightness: -25%);
    $ghost_border: 1px solid $teal;

    $dark_bg: $grey;
    $dark_bghover: color.adjust($grey, $lightness: -10%);
    $dark_color: $white;
    $dark_colorhover: $white;
    $dark_border: 1px solid $grey;

    @include button("primary", $teal, $backgroundhover, $white, $fonthover);
    @include button("secondary", color.adjust($light-grey, $lightness: -3%), color.adjust($light-grey, $lightness: -13%), $grey, $grey
    );
    @include button("danger", $red, color.adjust($red, $lightness: -10%), $white, $white);
    @include button("warning", color.adjust($orange, $lightness: -5%), color.adjust($orange, $lightness: -15%), $white, $white);
    @include button("success", $green, color.adjust($green, $lightness: -10%), $white, $white);
    @include button("dark", $dark_bg, $dark_bghover, $dark_color, $dark_colorhover, $dark_border);

    @include button("outline-primary", transparent, $backgroundhover, $white, $fonthover, thin solid $teal);
    @include button("outline-secondary", transparent, color.adjust($light-grey, $lightness: -13%), $grey, $grey, thin solid $light-grey);
    @include button("outline-danger", transparent, color.adjust($red, $lightness: -10%), $red, $white, thin solid $red);
    @include button("outline-warning", transparent, color.adjust($orange, $lightness: -15%), $orange, $white, thin solid $orange);
    @include button("outline-success", transparent, color.adjust($green, $lightness: -10%), $green, $white, thin solid $green);
    @include button("outline-dark", transparent, $dark_bghover, $grey, $dark_colorhover, $dark_border);

    &[class*=btn-sm] {
      padding: .3em 1em;
      font-size: .9em;
    }

    &[class*=mini] {
      padding: .2em 0.5em .2em 1em;
      font-size: .8em;
    }

    &[class*=btn-lg] {
      padding: .5em 1.3em;
      font-size: 1.4em;
    }

    &:disabled {
      background: $light-grey;
      color: color.adjust($grey, $lightness: 30%);
      border: 1px solid color.adjust($light-grey, $lightness: -5%);

      &:hover {
        background: $light-grey;
        color: color.adjust($grey, $lightness: 30%);
        cursor: not-allowed;
      }

      &:focus {
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px $background;
      }
    }

    + a[class*=btn],
    + button[class*=btn],
    + span[class*=btn],
    + input[type=submit][class*=btn] {
      margin-left: 5px;
    }
  }
}