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

// Form
@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();
  height      : 42px;
  line-height : 42px !important;
  }

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

// Radio input
@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;
  margin-right       : 10px;
  padding            : 0 !important;

  &:checked {
    background-color   : $mainColor;
    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;
      }
    }
  }

// 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 {
    height           : 23px;
    width            : 23px;
    margin: 0!important;
    }

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

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

  }

// Reusable button mixins
@mixin formButtonMixin($type: primary, $size: normal) {
  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;

  @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 or $type == dark) {
    color        : $dsDarkPurple !important;
    background   : #F3F5F9 !important;
    border-color : #d7dbec !important;
    min-width: 80px;

    &:hover {
      background   : #F3F5F9 !important;
      border-color : #d7dbec !important;
      }
    }
  @if ($size == normal) {
    padding: 7px 13px !important;
    font-size: 14px;
    }

  @if ($size == big) {
    padding: 10px 25px !important;
    font-size: 17px;
    }

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

    &:hover {
      background-color : #E46261 !important;
      border-color     : #E46261 !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 : 5px;
    }
  }

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


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

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

@mixin heading {
  color         : $headingColor;
  font-family   : $fontGeneral;
  line-height   : $lineHeight;
  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(16px, 15px, 13px);
  }

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

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

// ------------------------------------------------------------------------------------------- //
//                               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 : 12px;
    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;
      }
    }
  }