@import "variables";
@import "node_modules/@blackbaud/skyux-design-tokens/scss/mixins";

// Border mixin is now in the design tokens mixin

@mixin sky-shadow (
  $h-shadow: 0px,
  $v-shadow: 0px,
  $blur: 5px,
  $spread-radius: 0,
  $color: rgba(0, 0, 0, 0.3)
) {
  box-shadow: $h-shadow $v-shadow $blur $spread-radius $color;
}

// Begin typography

@mixin sky-page-heading {
  font-family: $sky-font-family-condensed;
  color: $sky-text-color-default;
  font-weight: 300;
  font-size: 34px;
}

@mixin sky-section-heading {
  font-family: $sky-font-family-condensed;
  color: $sky-text-color-default;
  font-weight: 300;
  font-size: 26px;
}

@mixin sky-subsection-heading {
  font-family: $sky-font-family;
  color: $sky-text-color-deemphasized;
  font-weight: 300;
  font-size: 19px;
}

@mixin sky-headline {
  font-family: $sky-font-family-condensed;
  color: $sky-text-color-default;
  font-weight: 500;
  font-size: 22px;
}

@mixin sky-emphasized {
  font-family: $sky-font-family;
  color: $sky-text-color-default;
  font-weight: 600;
  font-size: 16px;
}

@mixin sky-deemphasized{
  font-family: $sky-font-family;
  color: $sky-text-color-deemphasized;
  font-weight: 400;
  font-size: $sky-font-size-base;
  font-style: italic;
}

@mixin sky-field-label {
  font-family: $sky-font-family;
  color: $sky-text-color-deemphasized;
  font-weight: 400;
  font-size: $sky-font-size-base;
}

// End typography

@mixin sky-field-invalid {
  box-shadow: 0 0 8px rgba(237, 85, 101, 0.6);
  border: 1px solid #ed5565;
  outline: none;
}

@mixin sky-field-status($status) {
  @if($status == "active") {
    box-shadow: 0 0 8px rgba($sky-highlight-color-info, 0.6);
    border: 1px solid $sky-highlight-color-info;
    outline: none;
  }
  @if($status == "invalid") {
    box-shadow: 0 0 8px rgba($sky-highlight-color-danger, 0.6);
    border: 1px solid $sky-highlight-color-danger;
    outline: none;
  }
  @if($status == "success") {
    box-shadow: 0 0 8px rgba($sky-highlight-color-success, 0.6);
    border: 1px solid $sky-highlight-color-success;
    outline: none;
  }
}

//Begin tab buttons

@mixin sky-btn-tab {
  background-color: transparent;
  border: none;
  border-radius: 4px 4px 0 0;
  color: $sky-text-color-deemphasized;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  line-height: 1.8;
  padding: $sky-tab-btn-padding-top-bottom $sky-tab-btn-padding-left-right;

  &:hover, &:focus {
    background-color: $sky-background-color-neutral-light;
    color: $sky-text-color-default;
    text-decoration: none;
  }
}

@mixin sky-btn-tab-selected {
  background-color: $sky-background-color-primary-dark;
  color: #fff;

  &:hover, &:focus {
    background-color: $sky-background-color-primary-dark;
    color: #fff;
  }
}

// End tab buttons

@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-ellipsis($no-wrap: true) {
  @if $no-wrap { white-space: nowrap; }
  overflow: hidden;
  @include sky-experimental(text-overflow, ellipsis,
    not(-moz),
    not(-webkit),
    -o,
    -ms,
    not(-khtml),
    official
  );
}

@mixin sky-icon-button-borderless {
  color: $sky-text-color-icon-borderless;
  cursor: pointer;

  &:hover {
    color: darken($sky-text-color-icon-borderless, 20%);
    transition: color $sky-transition-time-short;
  }
}

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

  &:hover,
  &:focus,
  &.sky-btn-focus,
  &:active,
  &.sky-btn-active {
    color: $color;
    background-color: $hoverbackground;
    border-color: darken($border, 10%);
  }
  &:active,
  &.sky-btn-active {
    background-image: none;
  }
  &.sky-btn-disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.sky-btn-focus,
    &:active,
    &.sky-btn-active {
      background-color: $background;
      border-color: $border;
    }
  }
}

@mixin sky-dropdown-item() {
  background-color: transparent;
  border: none;
  display: block;
  margin: 4px;
  min-width: 160px;
  text-align: left;
  transition: background-color $sky-transition-time-short;

  &:hover {
    background-color: $sky-background-color-neutral-light;
  }

  /deep/ > button {
    background-color: transparent;
    border: none;
    color: $sky-text-color-default;
    cursor: pointer;
    display: block;
    padding: 3px $sky-padding-double;
    text-align: left;
    width: 100%;
  }
}

@mixin sky-focus-outline {
  //default
  outline: thin dotted;

  //webkit
  outline: -webkit-focus-ring-color auto 5px;
  outline-offset: -2px;
}

// Single side border-radius

@mixin sky-border-top-radius($radius) {
  border-top-right-radius: $radius;
  border-top-left-radius: $radius;
}
@mixin sky-border-right-radius($radius) {
  border-bottom-right-radius: $radius;
  border-top-right-radius: $radius;
}
@mixin sky-border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
  border-bottom-left-radius: $radius;
}
@mixin sky-border-left-radius($radius) {
  border-bottom-left-radius: $radius;
  border-top-left-radius: $radius;
}

@mixin create_columns($screen-size: sm) {
  @for $i from 1 through $sky-fluid-grid-columns {
    :host.sky-column-#{$screen-size}-#{$i} {
      width: ($i / $sky-fluid-grid-columns) * 100%;
    }
  }
}

@mixin sky-required-field {
  content: "*";
  color: $sky-highlight-color-danger;
  padding-left: $sky-padding-half;
}

@mixin sky-danger {
  content: "\f071";
  font-family: FontAwesome;
  margin-right: 5px;
  color: $sky-highlight-color-danger;
}