@use 'sass:color';
@use '@/theme' as *;

$focus-alpha: -0.6;
$disabled-alpha: -0.5;
$disabled-border-alpha: -0.8;

$input-color: $color-fg;
$input-bg-color: $color-bg;
$input-border-color: $color-fg;
$input-focus-color: color.adjust($input-color, $alpha: $focus-alpha);
$input-disabled-color: color.adjust($input-color, $alpha: $disabled-alpha);
$input-disabled-border-color: color.adjust($input-color, $alpha: $disabled-border-alpha);

$color-primary: $color-3;
$color-secondary: $color-4;
$color-info: $color-1;

form {
  display: block;
}

.form-group,
.form-group {
  &:not(:first-child) {
    margin-top: 0.5rem;
  }

  button,
  .bnt {
    &:not(:last-child) {
      margin-right: .8rem;
    }
  }
}

label,
input,
textarea {
  color: $input-color;
}

label,
input[type="radio"] {
  cursor: pointer;
  margin: 0;

  &:hover {
    font-weight: 600 !important;
  }
}

input[type="text"],
textarea,
button,
.btn {
  border-style: solid;
  border-width: 1px;
  padding: 0.5rem 1rem;
  transition: box-shadow 0.2s ease-in-out;
}

input[type="text"],
textarea {
  border-color: $input-border-color;
  background-color: $input-bg-color;

  &:focus,
  &:focus-visible {
    outline: none !important;
  }

  &:not(:disabled):not(:read-only) {

    &:hover,
    &:focus {
      box-shadow: 0 0 0.4rem $input-focus-color;
    }
  }

  &:disabled {
    color: $input-disabled-color;
    border-color: $input-disabled-border-color;
  }

  &:read-only {
    border-color: color.adjust($input-border-color, $alpha: $disabled-border-alpha);
  }
}

button,
.btn {
  &:not(:disabled) {
    cursor: pointer;

    &:active {
      transform: scale(.95);
    }

    &.activated {
      font-weight: bold;
    }
  }
}

button.txt,
.btn.txt {
  background-color: transparent;
  border: none;
  padding: 0;
  transition: text-shadow 0.2s ease-in-out;
}

.btn-group {

  button,
  .btn {
    margin: 0 !important;
  }
}

@mixin define-button($class-name, $color-fg, $color-bg) {

  button.#{$class-name}.txt,
  .btn.#{$class-name}.txt {
    color: $color-fg;
  }

  button.#{$class-name}:not(.txt),
  .btn.#{$class-name}:not(.txt) {
    background-color: $color-bg;

    &:not(:disabled) {
      color: $color-fg;
      border-color: $color-fg;

      &:hover {
        box-shadow: 0 0 0.4rem color.adjust($color-fg, $alpha: $focus-alpha);
      }

      &.activated {
        background-color: $color-fg;
        color: $color-bg;
      }
    }

    &:disabled {
      color: color.adjust($color-fg, $alpha: $disabled-alpha);
      border-color: color.adjust($color-fg, $alpha: $disabled-border-alpha);
    }
  }
}

@mixin define-txt-button($class-name, $color-fg) {

  button.txt.#{$class-name},
  .btn.txt.#{$class-name} {
    &:not(:disabled) {
      color: $color-fg;

      &:hover {
        text-shadow: 0 0 0.4rem color.adjust($color-fg, $alpha: 0.8 * $focus-alpha);
      }
    }

    &:disabled {
      color: color.adjust($color-fg, $alpha: $disabled-alpha);
    }
  }
}

@include define-button('default', $color-fg, $color-bg);
@include define-button('primary', $color-primary, $color-bg);
@include define-button('secondary', $color-secondary, $color-bg);
@include define-button('info', $color-info, $color-bg);
@include define-txt-button('primary', $color-primary);
@include define-txt-button('secondary', $color-secondary);

button.primary,
.btn.primary {
  font-weight: 600;
}
