$primary: #43454b;
$primary-300:#b4b5b7;
$secondary: #111;
$accent:#96588a;
$accent-300:#c09bb9;
$accent-700:#693e61;
$white: #fff;
$white-300: #fafafa;
$white-500: rgba(255, 255, 255, 0.5);
$black: #000;
$black-200: rgba(0, 0, 0, 0.2);
$black-300: rgba(0, 0, 0, 0.3);
$black-400: rgba(0, 0, 0, 0.4);
$black-500: rgba(0, 0, 0, 0.5);
$black-600: rgba(0, 0, 0, 0.6);
$gray:#8a8f9c;
$light-gray:#eeeeee;
$transparent : rgba(0, 0, 0, 0.0);
$pinterest:#E60023;
$twiiter:#1DA1F2;
$facebook:#4267B2;

$colors:(primary: $primary,
    primary-300:$primary-300,
    secondary: $secondary,
    accent:$accent,
    accent-300:$accent-300,
    accent-700:$accent-700,
    white: $white,
    white-300:$white-300,
    white-500:$white-500,
    black: $black,
    black-200:$black-200,
    black-300:$black-300,
    black-400:$black-400,
    black-500:$black-500,
    black-600:$black-600,
    gray: $gray,
    light-gray:$light-gray,
    transparent : $transparent,
);

@each $color,
$value in $colors {
    .color-#{$color} {
        color: $value;
    }

    .bgcolor-#{$color} {
        background-color: $value;
    }

    .border-color-#{$color} {
        border-color: $value;
    }
}

/* */
$count: 12;

@while $count <=40 {
    .font-size-#{$count} {
        font-size: $count + px;
    }

    $count: $count+1;
}

$count: 18;

@while $count <=60 {
    .line-height-#{$count} {
        line-height: $count + px;
    }

    $count: $count+1;
}

$count: 0;

@while $count <=10 {
    .letter-spacing-#{$count} {
        letter-spacing: $count / 10 + px;
    }

    $count: $count+1;
}


@mixin ratio($w, $h) {
    width: $w;
    height: $h;
}

@mixin sqaure($size) {
    width: $size;
    height: $size;
}

@mixin flex-center($display:flex) {
    display: $display;
    align-items: center;
    justify-content: center;
}

$mobile: 767;
$tablet: 768;
$large: 1024;
$desktop: 1280;

@mixin mobile {
    @media only screen and (max-width: $mobile * 1px) {
        @content;
    }
}

@mixin tablet {
    @media only screen and (min-width: $tablet * 1px) {
        @content;
    }
}

@mixin large {
    @media only screen and (min-width: $large * 1px) {
        @content;
    }
}

@mixin desktop {
    @media only screen and (min-width: $desktop * 1px) {
        @content;
    }
}

img {
    max-width: 100%;
    height: auto;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-semibold {
    font-weight: 600;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

.rounded-xl {
    border-radius: 5.8px;
}

.date-control {
    background-image: url("../../images/planner.png");
    background-position: 90%;
    background-size: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    &:focus,
    &:hover {
        // background-image: url("../../images/planner_active.png");
        // background-blend-mode: luminosity;
        background-blend-mode: difference !important;
    }
}

.ship-icon-field {
    background-image: url("../../images/accomodation_gray.png") !important;
    background-position: 90%;
    background-size: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    &:focus,
    &:hover {
        background-blend-mode: difference !important;
    }
}
.ersrv-item-search-location{
    background-image: url("../../images/mapPin_gray.png") !important;
    background-position: 96% !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    &:focus,
    &:hover {
        background-image: url("../../images/mapPin_gray.png") !important;
        background-blend-mode: difference !important;
    }
}

*:focus,
.focus-none,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle,
.custom-control-input:focus~.custom-control-label::before {
    outline: none !important;
    box-shadow: none !important;
}

.bootstrap-select>.dropdown-toggle {
    &::after {
        border: none !important;
        background-image: url(../../images/down_arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 15px;
        height: 10px;
        -webkit-filter: brightness(0) invert(0.6);
        filter: brightness(0) invert(0.6);
    }

    &:hover,
    &:focus {
        &::after {
            background-image: url(../../images/down_arrow_storefront.png);
            -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
        }
    }
}

.btn-primary {
    @extend .color-white;
    @extend .bgcolor-primary;
    @extend .border-color-primary;

    &:hover{
        color: $primary !important;
        background-color: $primary-300 !important;
        border-color: $primary-300 !important;
    }
}
.btn-primary:not(:disabled):not(.disabled).focus,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: $primary !important;
    background-color: $primary-300 !important;
    border-color: $primary-300 !important;
}

.btn-outline-fill-primary {
    @extend .color-primary;
    @extend .bgcolor-primary-300;
    @extend .border-color-primary;

    &:hover,
    &:focus,
    &:active {
        @extend .color-white;
        @extend .bgcolor-primary;
    }
}

.btn-outline-primary{
    @extend .color-primary;
    @extend .border-color-primary;
    @extend .bgcolor-transparent;

    &:hover,
    &:focus,
    &:active {
        @extend .color-white;
        @extend .border-color-primary;
        @extend .bgcolor-primary;
    }
}
.btn-outline-primary:not(:disabled):not(.disabled).focus,
.btn-outline-primary:not(:disabled):not(.disabled):focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    color: $white !important;
    background-color: $primary !important;
    border-color: $primary !important;
}
.btn-outline-secondary {
    @extend .color-secondary;
    @extend .border-color-secondary;
    @extend .bgcolor-transparent;

    &:hover,
    &:focus,
    &:active {
        @extend .color-white;
        @extend .border-color-primary;
        @extend .bgcolor-primary;
    }
}
.btn-outline-secondary:not(:disabled):not(.disabled).focus,
.btn-outline-secondary:not(:disabled):not(.disabled):focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show>.btn-outline-secondary.dropdown-toggle {
    color: $white !important;
    background-color: $primary !important;
    border-color: $primary !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: $white;
    text-decoration: none;
    background-color: $primary;
}

.custom-control-input:checked~.custom-control-label::before {
    color: $white;
    border-color: $primary;
    background-color: $primary;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color: $white;
    background-color: $primary-300;
    border-color: $primary-300;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: $primary;
}

.search-page .btn-xl {
    padding: 15px 41px;
}

.btn-accent {
    @extend .color-white;
    @extend .bgcolor-accent;
    @extend .border-color-accent;

    &:hover,
    &:focus,
    &:active {
        @extend .color-black;
        @extend .bgcolor-accent-300;
    }
}