// This file is the entry point for commonly used internal-only SCSS mixins.
// (Our components should @use this file in their SCSS file.)

@forward '_public-api/_compat/mixins';
@forward '_public-api/mixins';
@forward 'node_modules/@blackbaud/skyux-design-tokens/scss/mixins';

@use 'variables' as *;

@mixin sky-experimental(
  $property,
  $value,
  $moz: $sky-experimental-support-for-mozilla,
  $webkit: $sky-experimental-support-for-webkit,
  $o: $sky-experimental-support-for-opera,
  $ms: $sky-experimental-support-for-microsoft,
  $khtml: $sky-experimental-support-for-khtml,
  $official: true
) {
  @if $webkit and $sky-experimental-support-for-webkit {
    -webkit-#{$property}: $value;
  }
  @if $khtml and $sky-experimental-support-for-khtml {
    -khtml-#{$property}: $value;
  }
  @if $moz and $sky-experimental-support-for-mozilla {
    -moz-#{$property}: $value;
  }
  @if $ms and $sky-experimental-support-for-microsoft {
    -ms-#{$property}: $value;
  }
  @if $o and $sky-experimental-support-for-opera {
    -o-#{$property}: $value;
  }
  @if $official {
    #{$property}: $value;
  }
}

@mixin sky-button-variant(
  $color,
  $background,
  $border,
  $hoverbackground: darken($background, 10%)
) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:active,
  &.sky-btn-active {
    color: $color;
    background-color: $hoverbackground;
    border-color: darken($border, 10%);
  }
  &:active,
  &.sky-btn-active {
    background-image: none;
  }
  // TODO: Consider removing in a future change after visual tests are in place as these styles appear to have no effect.
  &.sky-btn-disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.sky-btn-focus,
    &:active,
    &.sky-btn-active {
      background-color: $background;
      border-color: $border;
    }
  }
}

@mixin sky-field-invalid {
  box-shadow: 0 0 8px #ed556599;
  border: 1px solid #ed5565;
  outline: none;
}
