// Tranisition Mixin
@mixin fpTransition {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

// Common Spacing Mixin
@mixin fpPtb120 {
    padding-top: 90px;
    padding-bottom: 90px;

    @media only screen and (max-width: $md_991) {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    @media only screen and (max-width: $sm_767) {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@mixin fpPt120 {
    padding-top: 90px;

    @media only screen and (max-width: $md_991) {
        padding-top: 70px;
    }

    @media only screen and (max-width: $sm_767) {
        padding-top: 50px;
    }
}

@mixin fpPb120 {
    padding-bottom: 90px;

    @media only screen and (max-width: $md_991) {
        padding-bottom: 70px;
    }

    @media only screen and (max-width: $sm_767) {
        padding-bottom: 50px;
    }
}

// Common Button Mixin
@mixin fpCommonFillButton {
    padding: 12px 24px;
    border-radius: 5px;
    background: $bgLightPurplev3;
    color: $textBlack;
    font-weight: $fontMedium;
    text-transform: capitalize;

    &:hover,
    &:focus {
        color: $textPurple;
        background: $bgBlack;
    }

    @media only screen and (max-width: $xl_1400) {
        font-size: 15px;
        padding: 12px 20px;
        border-radius: 8px;
    }
}

@mixin fpCommonBlackButton {
    color: $textPurple;
    background: $bgBlack;

    &:hover,
    &:focus {
        color: $textBlack;
        background: $bgPurple;
    }
}

@mixin fpCommonWhiteButton {
    color: $textBlack;
    background: $bgWhite;

    &:hover,
    &:focus {
        color: $textBlack;
        background: $bgPurple;
    }
}

@mixin fpCommonBorderButton {
    color: $textBlack;
    background: transparent;
    border: 1px solid $bgBlack;

    &:hover,
    &:focus {
        color: $textBlack;
        background: $bgPurple;
    }
}

@mixin fpCommonLinkButton {
    border: 0;
    color: $textBlack;
    background: transparent;
    font-weight: $fontMedium;
    text-transform: capitalize;
    text-decoration: underline;

    &:hover,
    &:focus {
        color: $textPurple;
        text-decoration: none;
    }

    @media only screen and (max-width: $xl_1400) {
        font-size: 14px;
    }
}

// Common Heading Mixin
@mixin fpHead80 {
    line-height: 1.2;
    font-size: 70px;

    @media only screen and (max-width: $xl_1660) {
        font-size: 60px;
    }

    @media only screen and (max-width: $xl_1440) {
        font-size: 50px;
    }

    @media only screen and (max-width: $md_991) {
        font-size: 40px;
    }

    @media only screen and (max-width: $sm_768) {
        font-size: 30px;
    }

    @media only screen and (max-width: $xs_575) {
        font-size: 25px;
    }
}

@mixin fpHead40 {
    line-height: 1.2;
    font-size: 35px;

    @media only screen and (max-width: $xl_1400) {
        font-size: 32px;
    }

    @media only screen and (max-width: $md_991) {
        font-size: 30px;
    }

    @media only screen and (max-width: $sm_768) {
        font-size: 24px;
    }

    @media only screen and (max-width: $xs_575) {
        font-size: 22px;
    }
}

@mixin fpHead28 {
    line-height: 1.2;
    font-size: $font28;

    @media only screen and (max-width: $xl_1400) {
        font-size: 22px;
    }

    @media only screen and (max-width: $md_991) {
        font-size: 20px;
    }

    @media only screen and (max-width: $xs_575) {
        font-size: 18px;
    }
}

@mixin fpHead24 {
    line-height: 1.2;
    font-size: 22px;

    @media only screen and (max-width: $xl_1440) {
        font-size: 20px;
    }

    @media only screen and (max-width: $md_991) {
        font-size: 18px;
    }
}

@mixin fpHead20 {
    line-height: 1.2;
    font-size: $font20;
    font-weight: $fontSemiBold;

    @media only screen and (max-width: $xl_1400) {
        font-size: 18px;
    }
}

@mixin fpHead18 {
    line-height: 1.2;
    font-size: $font18;

    @media only screen and (max-width: $xl_1400) {
        font-size: 16px;
    }
}

@mixin fpCommonHead {
    padding-bottom: 40px;

    @media only screen and (max-width: $md_991) {
        padding-bottom: 30px;
    }
}

// Common Icons Mixin
@mixin fpIcon {
    position: absolute;
    top: 0;
    bottom: 0;
    content: '';
    right: 15px;
    width: 20px;
    height: 20px;
    margin: auto 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    &.fp-ic-search {
        background-image: url('../images/icons/fp-search-black.svg');
    }

    &.fp-ic-location {
        background-image: url('../images/icons/fp-location.svg');
    }

    &.fp-eye-icon {
        background-image: url('../images/icons/fp-eye.svg');
        &:after {
            position:absolute;
            top:0;
            left:0;
            right:0;
            opacity:0;
            width:2px;
            content:"";
            margin:auto;
            height:100%;
            background: $bgBlack;
            @include fpTransition;
            transform:rotate(-40deg);
            -o-transform:rotate(-40deg);
            -ms-transform:rotate(-40deg);
            -moz-transform:rotate(-40deg);
            -webkit-transform:rotate(-40deg)
        }
        &.fp-show-eye {
            &:after {
               opacity:1;
            }
        }
    }

}

@mixin fpImgIcon {
    width: 60px;
    height: 60px;
    line-height: 56px;
    text-align: center;
    border-radius: 15px;

    img {
        width: 30px;
        height: 30px;
    }
}

// Common InputFeilds Mixin
@mixin fpFormControl {
    height: 56px;
    padding-left: 20px;
    border-radius: 12px;
    border: 1px solid $bgBlack;

    &:focus {
        box-shadow: none;
        border-color: inherit;
    }

    @media only screen and (max-width: $sm_767) {
        font-size: 14px;
        height: 46px;
    }
}

// Common Box Icons Mixin
@mixin fpCommonBoxIcon {
    width: 56px;
    height: 56px;
    line-height: 3.3;
    text-align: center;
    border-radius: 12px;

    @media only screen and (max-width: $xl_1400) {
        width: 46px;
        height: 46px;
        line-height: 2.6;

        img {
            width: 25px;
            height: 25px;
        }
    }
}

// Common Badges Mixin
@mixin fpBadge {
    padding: 10px 15px;
    font-size: $font14;
    border-radius: 10px;
    background: #F0F0F0;
    font-weight: $fontMedium;

    @media only screen and (max-width: $xs_575) {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 5px;
    }

    &.fp-success-badge {
        color: #00842E;
        background: #E0FFEB;
        border-color: #00842E;
    }

    &.fp-badge-orange {
        color: #CC8B66;
        background: #F7EEE8;
    }

    &.fp-badge-yellow {
        color: #B29800;
        background: #FFFAE0;
    }

    &.fp-badge-yellow,
    &.fp-badge-orange {
        border-color: transparent;
    }
}

// Common DropDown Mixin
@mixin fpCommonDropdown {
    .dropdown-toggle {
        height: 56px;
        min-width: 150px;
        text-align: left;
        border-radius: 10px;
        background: $bgWhite;
        border: 1px solid $bgPurple;

        @media only screen and (max-width: $sm_767) {
            font-size: 14px;
            height: 46px;
        }

        &::after {
            position: absolute;
            top: 0;
            bottom: 0;
            border: 0;
            right: 15px;
            width: 15px;
            height: 8px;
            margin: auto;
            background: url('../images/icons/fp-caret-down-black.svg');
        }
    }

    .dropdown-menu {
        border: solid 1px $bgLightPink;
        border-radius: $borderRadius10;
        overflow: hidden;
        padding: 0;
        li {
            a {
                padding: 12px 16px;
                &:hover,&:focus,:focus-visible {
                    background: $bgLightPurple;
                    color: $bgBlack;
                    outline: none;
                }
            }
            + {
                li {
                    border-top: solid 1px $bgLightPink;
                }
            }
        }
    }
}

// Custom CheckBox Mixins
@mixin fpCheckBox {
    position: relative;
    display: block;
    cursor: pointer;
    font-size: $font16;
    padding-left: 30px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    .fp-checkmark {
        position: absolute;
        top: 2px;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: $bgWhite;
        @include fpTransition;
        border: 1px solid $bgPurple;

        &:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: -2px;
            width: 5px;
            content: "";
            height: 10px;
            margin: auto;
            display: none;
            border: solid $bgBlack;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }

    input {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        cursor: pointer;

        &:checked {
            ~.fp-checkmark {
                border-color: $bgPurple;
                background-color: $bgPurple;

                &:after {
                    display: block;
                }
            }
        }
    }
}

// Line Restriction Mixin
@mixin fpLineRestrict {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

// Link Mixin
@mixin fpCommonLink {
    color: $textBlack;
    text-decoration: underline;
    font-weight: $fontSemiBold;

    &:hover {
        text-decoration: none;
    }
}

// Border Mixin
@mixin fpBorderPattern {
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 2px; 
        pointer-events: none;
        background:
            repeating-linear-gradient(90deg, $bgBlack 0 14px, transparent 14px 30px) top / 100% 4px no-repeat,
            repeating-linear-gradient(90deg, $bgBlack 0 14px, transparent 14px 30px) bottom / 100% 4px no-repeat,
            repeating-linear-gradient(0deg,  $bgBlack 0 14px, transparent 14px 30px) left / 4px 100% no-repeat,
            repeating-linear-gradient(0deg,  $bgBlack 0 14px, transparent 14px 30px) right / 4px 100% no-repeat;
            mask: linear-gradient($bgBlack 0 0) content-box, linear-gradient($bgBlack 0 0);
            -webkit-mask: linear-gradient($bgBlack 0 0) content-box, linear-gradient($bgBlack 0 0);
            mask-composite: exclude;    
    }
}

// Align Mixin
@mixin fpDflexAlignItemsCenter {
    display: flex;
    align-items: center;
}

@mixin fpDflexWrap {
    display: flex;
    flex-wrap: wrap;
}

@mixin fpDflexJustifyContentCenter {
    display: flex;
    justify-content: center;
}

@mixin fpDflexAlignItemsJustifyContentCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin fpDflexWrapJustifyCenter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}