// ------------------------------------------------------------------------------------------- //
//   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      : 6px;
  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 : #6A39E4;

    &:hover {
      box-shadow : inset 0 0 0 2px #6A39E4 !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: block) {
  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     : $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;
      }
    }
  }

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

@mixin notificationMixin($type: general) {
  border-radius       : 11px;
  padding             : 21px 15px!important;
  line-height         : 1.7em;
  font-size           : 12px;
  color               : #3a3a3a;
  font-weight         : 500;
  position            : relative;
  background-color    : #fff;
  background-size     : 22px auto;
  background-position : 24px center;
  background-repeat   : no-repeat;
  box-shadow: 0 0 20px #0000000D;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 25px;

  .wpz-custom-css-js-notification-wrapper {
      display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    }

  .wpz-custom-css-js-notification-wrapper > *:not(:last-child){
      margin-right: 8px;
    }

  .wpz-custom-css-js-notification-logo {
    width: 32px;
    }


  a:not(.wpz-custom-css-js-button-primary):not(.wpz-custom-css-js-button-secondary) {
    text-decoration-line: underline;
    color: #fd925c;
    }

  }


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

@mixin heading {
  color         : $headingColor;
  font-family   : $fontGeneral;
  line-height   : $headingLineHeight;
  font-weight   : $headingWeight;
  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;

    }

  }