// ------------------------------------------------------------------------------------------- //
//   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
// ------------------------------------------------------------------------------------------- //

// Reusable form mixins
@mixin formElementMixin() {
  box-shadow       : none !important;
  background-color : #FFFFFF !important;
  font-size        : 12px;
  border           : 1px solid #D8E3E8;
  font-weight      : 500;
  border-radius    : 6px;
  font-family      : $fontGeneral;
  color            : $fontColor;

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

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

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

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

// Reusable button mixins
@mixin formButtonMixin($type: primary) {
  font-size     : 13px;
  font-weight   : 500;
  border-radius : 5px;
  border        : 1px solid;
  padding       : 8px 10px;
  cursor          : pointer;
  height          : auto;
  box-shadow      : none !important;
  outline         : none !important;
  text-decoration : none;

  @if ($type == primary) {
    color        : $whiteColor !important;
    background   : $mainColor !important;
    border-color : $mainColor !important;
    min-width: 80px;

    &:hover {
      background   : $mainColor !important;
      border-color : $mainColor !important;
      opacity: 0.9;
      }
    }

  @if ($type == secondary) {
    color        : $dsDarkPurple !important;
    background   : #F3F5F9 !important;
    border-color : #d7dbec !important;
    min-width: 80px;
    &:hover {
      background   : #F3F5F9 !important;
      border-color : #d7dbec !important;
      }
    }

  @if ($type == dark) {
    color        : $whiteColor !important;
    background   : $agsDarkGrey !important;
    border-color : $agsDarkGrey !important;
    &:hover {
      background-color : $agsLightGrey !important;
      border-color     : $agsLightGrey !important;
      }
    }

  @if ($type == delete) {
    color        : $whiteColor !important;
    background   : $danger !important;
    border-color : $danger !important;
    &:hover {
      background-color : #E46261 !important;
      border-color     : #E46261 !important;
      }
    }
  }

// Reusable radio input mixin
@mixin formRadioMixin() {
  background-color   : #FDFDFD !important;
  border             : none;
  border-radius      : 50%;
  box-shadow         : inset 0 0 0 1px $darkBorderColor !important;
  cursor             : pointer;
  font               : inherit;
  height             : 20px !important;
  outline            : none;
  width              : 21px !important;
  -moz-appearance    : none;
  -webkit-appearance : none;
  padding            : 0 !important;

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

  &:checked {
    background-color   : white;
    box-shadow         : inset 0 0 0 5px $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() {
  border-width     : 1px;
  background-color : #fff;
  border-color     : $darkBorderColor;
  border-radius    : 6px;
  box-shadow       : none;
  height           : 25px;
  width            : 25px;
  min-width        : 25px;
  max-width        : 25px;
  margin           : 0;

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

  &:hover {
    border-color : $darkBorderColor;
    }

  &:checked {
    background-color : $mainColor;

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

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

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

@mixin formLabelMixin($type: false) {
  font-size   : 12px;
  font-weight : 500;
  line-height : 1.5;
  color       : $baseHeaderColor;

  @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   : $middleBorderColor !important;
  border-color : $middleBorderColor !important;

  &:hover {
    color        : #8f8e8f !important;
    background   : $middleBorderColor !important;
    border-color : $middleBorderColor !important;
    }
  }

@mixin button {
  line-height     : 1.4;
  cursor          : pointer;
  height          : auto !important;
  min-height      : auto !important;
  outline         : none;
  text-decoration : none;
  font-family     : $fontGeneral;
  font-weight     : 600;
  border-radius   : $mainRadius;
  border          : 1px solid;
  box-shadow      : none !important;
  display         : inline-block;
  text-align      : center;

  &: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 : $mainColor !important;
      border-color     : $mainColor !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 == outline) {
    color            : $mainColor !important;
    background-color : transparent !important;
    border-color     : $mainColor !important;

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

    &:hover {
      color            : #fff !important;
      background-color : $mainColor !important;
      border-color     : $mainColor !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 : 14px;
    padding   : 15px 25px !important;
    min-width : 140px;
    &:hover {
      padding : 15px 25px !important;
      }
    }
  }


.ags-xoiwc-button-primary {
  @include button;
  @include colorButtonMixin(primary);
  @include sizeButtonMixin(medium);
  }

.ags-xoiwc-button-secondary {
  @include button;
  @include colorButtonMixin(outline);
  @include sizeButtonMixin(small);
  }

.ags-xoiwc-button-dark {
  @include formButtonMixin("dark");
  }

.ags-xoiwc-button-delete {
  @include formButtonMixin("delete");
  }


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

@mixin notificationMixin($type: general) {
  border-width  : 0 0 0 4px !important;
  border-style  : solid;
  padding       : 10px 15px !important;
  line-height   : 1.5;
  font-size     : 15px !important;
  color         : $baseFontColor !important;
  box-shadow    : $boxShadow;
  position            : relative;
  border-radius : 9px;

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

  @if ($type == general) {
    background-color : #E3F6FF !important;
    border-color     : $neonBlueDark;
    }

  @if ($type == error) {
    background-color : #FFE5E5 !important;
    border-color     : $danger;
      }
  @if ($type == warning) {
    background-color : #FEF6E3 !important;
    border-color     : $warning;
    }
  @if ($type == success) {
    background-color : #ECF8F2 !important;
    border-color     : $success;
    }
  }


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

@mixin heading {
  color         : $fontColor;
  font-family   : $fontGeneral;
  line-height   : $headingLineHeight;
  font-weight   : $baseHeadingWeight;
  margin-top    : 0;
  margin-bottom : 1em;
  }

@mixin headingH1 {
  @include responsiveFontSize(20px, 20px, 20px);
  }

@mixin headingH2 {
  @include responsiveFontSize(17px, 16px, 16px);
  }

@mixin headingH3 {
  @include responsiveFontSize(15px, 15px, 13px);
  }

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

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



@mixin ul {

  list-style   : none;
  padding-left : 15px !important;

  > li {
    margin-bottom : 15px;
    position      : relative;

    }

  > li:before {
    content  : url("../images/check-orange.svg");
    display  : inline-block;
    position : relative;
    left     : -25px;
    bottom   : 0;

    }

  }