// ------------------------------------------------------------------------------------------- //
//   RESPONSIVE FONTS MIXIN
//   Usage: $font-desktop, $font-tablet, $font-phone
//      h2 {
//        @include responsiveFontSize(30px, 25px, 20px);
//      }
// ------------------------------------------------------------------------------------------- //

@mixin responsiveFontSize($font-desktop, $font-tablet, $font-phone) {
  font-size : $font-desktop;

  @media (max-width : $breakLarge) {
    font-size : $font-tablet;
    }

  @media (max-width : $breakSmall) {
    font-size : $font-phone;
    }
  }

// ------------------------------------------------------------------------------------------- //
//                                           Form Mixins
// ------------------------------------------------------------------------------------------- //

// Form
@mixin formElementMixin() {
  box-shadow       : none !important;
  background-color : $lightBorderColor !important;
  font-size        : 14px;
  border           : 1px solid $middleBorderColor;
  font-weight      : 400;
  border-radius    : $mainRadius;
  font-family      : $fontGeneral;
  color            : $fontColor;

  &:focus {
    border-color : $darkBorderColor;
    color        : $fontColor;
    }
  }

// Text input
@mixin formInputMixin() {
  @include formElementMixin();
  padding     : 0 16px !important;
  height      : 35px;
  line-height : 35px !important;
  width       : 100%;

  &[disabled] {
    opacity : 0.5;
    cursor  : not-allowed;
    }
  }

// Textarea
@mixin formTextareaMixin() {
  @include formElementMixin();
  width   : 100%;
  padding : 10px 16px !important;
  }

// Radio input
@mixin formRadioMixin() {
  background-color   : $middleBorderColor !important;
  box-shadow         : none;
  border             : none;
  border-radius      : 50%;
  cursor             : pointer;
  font               : inherit;
  height             : 26px !important;
  width              : 26px !important;
  margin             : 0 10px 0 0;
  outline            : none;
  -moz-appearance    : none;
  -webkit-appearance : none;
  padding            : 0 !important;

  &:hover {
    box-shadow : inset 0 0 0 3px $mainColor !important;
    outline    : none !important;
    }

  &:checked {
    background-color   : #FFF !important;
    box-shadow         : inset 0 0 0 9px $mainColor !important;
    -webkit-transition : background .15s, box-shadow .1s;
    transition         : background .15s, box-shadow .1s;

    &:before {
      display : none !important;
      }
    }

  &[disabled] {
    background-color : $middleBorderColor !important;
    opacity          : .3 !important;
    cursor           : not-allowed !important;
    }
  }

// Checkbox
@mixin formCheckboxMixin() {
  -webkit-appearance : none;
  border             : none;
  background-color   : $middleBorderColor;
  border-radius      : 4px;
  box-shadow         : none;
  height             : 24px !important;
  width              : 24px !important;
  margin             : 0 10px 0 0;
  vertical-align     : middle;

  &:before {
    margin       : 0 !important;
    width        : 24px;
    height       : 24px;
    line-height  : 22px;
    float        : none;
    text-align   : center;
    padding-left : 0;
    }

  &:hover {
    box-shadow : inset 0 0 0 2px #E6E7E8 !important;
    outline    : none !important;
    }

  &:checked {
    background-color : $seaGreen;

    &:hover {
      box-shadow : inset 0 0 0 2px $seaGreenDark !important;
      }

    &:before {
      content : url("../images/check.svg");
      }
    }

  &:not(.agsdi_icons_preview)[disabled] {
    background-color : $middleBorderColor;
    border-color     : $middleBorderColor;
    opacity          : .3 !important;
    cursor           : not-allowed !important;
    }
  }

// Label
@mixin formLabelMixin($type: false) {
  font-size   : 14px;
  font-weight : 600;
  line-height : 1.5;
  color       : $headingColor;

  @if ($type == inline) {
    display : inline-block;
    }

  @if ($type == block) {
    display       : block;
    margin-bottom : 10px;
    }
  }


// ------------------------------------------------------------------------------------------- //
//                               Buttons Mixin
// ------------------------------------------------------------------------------------------- //

@mixin disabledButtonMixin {
  cursor       : not-allowed;
  color        : #8F8E8F !important;
  background   : $checkboxGrey !important;
  border-color : $checkboxGrey !important;

  &:hover {
    color        : #8F8E8F !important;
    background   : $checkboxGrey !important;
    border-color : $checkboxGrey !important;
    }
  }

@mixin button {
  line-height     : 1.4;
  cursor          : pointer;
  height          : auto !important;
  min-height      : auto !important;
  outline         : none;
  text-decoration : none;
  font-family     : $fontButton;
  font-weight     : 600;
  border-radius   : $mainRadius;
  border          : 2px solid;
  box-shadow      : none !important;

  &:focus {
    box-shadow : none;
    }

  &[disabled] {
    @include disabledButtonMixin;
    }
  }

// Button Color Scheme
@mixin colorButtonMixin($color: primary) {
  @if ($color == primary) {
    color            : $whiteColor !important;
    background-color : $mainColor !important;
    border-color     : $mainColor !important;

    &:focus {
      color            : #FFF !important;
      background-color : $mainColor !important;
      border-color     : $mainColor !important;
      }

    &:hover {
      color            : #FFF;
      background-color : $mainHoverColor !important;
      border-color     : $mainHoverColor !important;
      }
    }

  @if ($color == purple) {
    color            : $whiteColor !important;
    background-color : $dsBrightPurple !important;
    border-color     : $dsBrightPurple !important;

    &:focus {
      color            : $whiteColor !important;
      background-color : $dsBrightPurple !important;
      border-color     : $dsBrightPurple !important;
      }

    &:hover {
      color            : #FFF;
      background-color : $dsMainPurple !important;
      border-color     : $dsMainPurple !important;
      }
    }

  @if ($color == seaGreen) {
    color            : $whiteColor !important;
    background-color : $seaGreen !important;
    border-color     : $seaGreen !important;

    &:focus {
      color            : $whiteColor !important;
      background-color : $seaGreen !important;
      border-color     : $seaGreen !important;
      }

    &:hover {
      color            : #FFF;
      background-color : $seaGreenDark !important;
      border-color     : $seaGreenDark !important;
      }
    }

  @if ($color == grey) {
    color            : $fontColor !important;
    background-color : $middleBorderColor !important;
    border-color     : $middleBorderColor !important;

    &:focus {
      color            : $fontColor !important;
      background-color : $middleBorderColor !important;
      border-color     : $middleBorderColor !important;
      }

    &:hover {
      color            : $fontColor;
      background-color : #DDE2E5 !important;
      border-color     : #DDE2E5 !important;
      }
    }
  }

// Size Buttons
@mixin sizeButtonMixin($size: medium) {
  @if ($size == small) {
    font-size : 14px;
    padding   : 7px 13px !important;
    min-width : 108px;
    &:hover {
      padding : 7px 13px !important;
      }
    }
  @if ($size == medium) {
    font-size : 14px;
    padding   : 10px 20px !important;
    min-width : 120px;
    &:hover {
      padding : 10px 20px !important;
      }
    }
  @if ($size == large) {
    font-size : 17px;
    padding   : 12px 25px !important;
    min-width : 215px;
    &:hover {
      padding : 12px 25px !important;
      }
    }
  }

// ------------------------------------------------------------------------------------------- //
//                                       Notification Mixins
// ------------------------------------------------------------------------------------------- //

@mixin notificationMixin($type: general) {
  border        : none !important;
  padding       : 10px 10px 10px 50px !important;
  line-height   : 1.5;
  font-size     : 15px !important;
  color         : $fontColor !important;
  box-shadow    : $boxShadow;
  position      : relative;
  border-radius : $mainRadius;

  a {
    color       : inherit !important;
    font-weight : 700;
    }

  @if ($type == general) {
    background-color : #E3F6FF !important;
    &:before {
      content    : "\70" !important;
      background : $neonBlue;
      }
    }
  @if ($type == error) {
    background-color : #FFE5E5 !important;
    &:before {
      content    : "\71" !important;
      background : $danger;
      }
    }
  @if ($type == warning) {
    background-color : #FEF6E3 !important;
    &:before {
      content    : "\73" !important;
      background : $warning;
      }
    }
  @if ($type == success) {
    background-color : tint($success, 90%) !important;
    &:before {
      content    : "\52" !important;
      background : $success;
      }
    }

  &:before {
    font-family   : ETModules;
    color         : #FFF;
    text-align    : center;
    position      : absolute;
    top           : 0;
    left          : 0;
    font-size     : 20px;
    width         : 36px;
    line-height   : 42px;
    height        : 100%;
    border-radius : $mainRadius;
    display       : block !important;
    }
  }

// ------------------------------------------------------------------------------------------- //
//                                      Heading Mixins
// ------------------------------------------------------------------------------------------- //

@mixin heading {
  color         : $headingColor;
  font-family   : $fontHeading;
  line-height   : $headingLineHeight;
  font-weight   : $headingWeight;
  margin-top    : 0;
  margin-bottom : 1em;
  }

@mixin headingH1 {
  @include responsiveFontSize(25px, 24px, 22px);
  }

@mixin headingH2 {
  @include responsiveFontSize(22px, 21px, 20px);
  }

@mixin headingH3 {
  @include responsiveFontSize(19px, 18px, 17px);
  }

@mixin headingH4 {
  @include responsiveFontSize(16px, 16px, 15px);
  }

@mixin headingH5 {
  @include responsiveFontSize(14px, 14px, 13px);
  }