@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'mixins/toast' as *;
@use 'variables' as *;

// Toasts
.toast {
  // @include toast-variant($dark-color); // old spectre.css
  @include toast-variant($color: 'dark-color');

  // border: $border-width solid $dark-color; // old spectre.css
  border: get-var('border-width') solid color('dark-color');
  // border-radius: $border-radius; // old spectre.css
  border-radius: get-var('border-radius');
  // color: $light-color; // old spectre.css
  color: color('light-color');
  display: block;
  // padding: $layout-spacing; // old spectre.css
  padding: get-var('layout-spacing', $unit: 1);
  width: 100%;

  // Variants.
  @include toast-class-variant($name: 'accent', $color: 'accent-color'); // ! New toast variant.
  @include toast-class-variant($name: 'disabled', $color: 'disabled-color'); // ! New toast variant.
  @include toast-class-variant($name: 'error', $color: 'error-color');
  @include toast-class-variant($name: 'gray', $color: 'gray-color'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-dark', $color: 'gray-color-dark'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-light', $color: 'gray-color-light'); // ! New toast variant.
  @include toast-class-variant($name: 'info', $color: 'info-color'); // ! New toast variant.
  @include toast-class-variant($name: 'light', $color: 'light-color'); // ! New toast variant.
  @include toast-class-variant($name: 'primary', $color: 'primary-color');
  @include toast-class-variant($name: 'secondary', $color: 'secondary-color'); // ! New toast variant.
  @include toast-class-variant($name: 'success', $color: 'success-color');
  @include toast-class-variant($name: 'warning', $color: 'warning-color');

  &.toast-disabled {
    color: color('disabled-color', $lightness: -10%);
  }

  &.toast-gray-light {
    color: color('gray-color-dark');
  }

  &.toast-info {
    color: color('info-color', $lightness: -60%);
  }

  &.toast-light {
    color: color('body-font-color');
  }

  &.toast-secondary {
    color: color('primary-color');
  }

  a {
    // color: $light-color; // old spectre.css
    color: color('light-color');
    text-decoration: underline;

    &:focus,
    &:hover,
    &:active,
    &.active {
      opacity: 0.75;
    }
  }

  .btn-clear {
    // margin: $unit-h; // old spectre.css
    margin: get-var('unit-h');
  }

  p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}