/*------------------------------------------------------------------
[4 - Components]
*/
/*------------------------------------------------------------------
[4.1 - Form]
*/
input[type=email],
input[type=number],
input [type=url] {
    direction: rtl !important;
}

.form-label {
    color: var(--color-3);
    font-weight: 600;

    .required {
        color: var(--color-1);
    }
}

.form-select, 
.form-control {
    border-radius: 1rem;
    cursor: pointer;
    border-color: var(--color-4);
    color: var(--color-3);

    &:focus {
        color: var(--color-3);
        box-shadow: none;
        border-color: rgba(var(--color-1-rgb),.75);
    }

    &:disabled {
        background-color: var(--color-4);
        cursor: not-allowed;
    }

    &::placeholder {
        color: rgba(var(--color-3-rgb),.75);
    }

    &.missing {
        border-color: var(--color-6) !important;
    }
}

.form-select:not(.install-select) {
    background-image: url("../image/chevron.svg");
    height: 3.250rem;
    padding: 0 1.25rem 0 3.5rem;
    line-height: 3;
}

.form-control {
    &:not(textarea):not(input[type=file]):not(.stripe-input):not(.install-input) {
        padding: 0 1.25rem;
        height: 3.250rem;
        line-height: 3;
    }

    &:not(input) {
        padding: 1rem 1.25rem;
    }
}

input[type=file] {
    padding: 0 .75rem 1.25rem 1.25rem;
    height: 3.250rem;
    line-height: 3;
}

input[type=number] {
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
    }
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-check {
    .form-check-input {
        filter: none !important;
        width: 1.5em;
        height: 1.5em;
        border: 1px solid rgba(var(--color-2-rgb),.1);
        border-radius: .5rem;
        margin-top: 0;
        cursor: pointer;

        &:focus {
            box-shadow: none;
        }

        &:checked {
            background-color: var(--color-1) !important;
        }
    }

    .form-check-label {
        color: var(--color-3);
        font-weight: 600;
        cursor: pointer;
    }
}

.form-switch {
    .form-check-input {
        filter: none !important;
        width: 3.5em;
        height: 2em;
        border: 1px solid rgba(var(--color-3-rgb),.2);
        border-radius: .5rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Crect x='-3' y='-3' width='6' height='6' rx='1' fill='rgb(173 181 196)' /%3E%3C/svg%3E");
        z-index: 1;

        &:checked {
            background-color: rgba(var(--color-1-rgb),.05);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Crect x='-3' y='-3' width='6' height='6' rx='1' fill='rgb(50 62 221)' /%3E%3C/svg%3E");
        }

        &:focus {
            box-shadow: none;
            border-color: rgba(var(--color-3-rgb),.2) !important;
        }
    }

    .form-check-label {
        color: var(--color-3);
        font-weight: 600;
        cursor: pointer;
    }

    span {
        font-size: 1.25rem;
        color: var(--color-3);
        cursor: pointer;
    }
}

.form-range {
    &::-webkit-slider-thumb {
        background: var(--color-1);

        &:active {
            background: var(--color-1);
        }
    }

    &:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--color-1-rgb),.25);
    }

    &:focus::-moz-range-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--color-1-rgb),.25);
    }
}

.input-icon {
    position: relative;

    > input,
    > select,
    > textarea {
        padding-right: 3rem !important;

        &:focus + i {
            color: var(--color-1);
        }
    }

    > i {
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        color: rgba(var(--color-1-rgb),.25);
        @include transition(color .5s ease);
    }
}

@media (max-width: $breakpoint-sm) {
    .width-sm,
    .width-lg {
        width: 90%;
    }
}

@media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
    .width-sm,
    .width-lg {
        width: 70%;
    }
}

@media (min-width: $breakpoint-medium) and (max-width: $breakpoint-xl) {
    .width-sm,
    .width-lg {
        width: 50%;
    }
}

@media (min-width: $breakpoint-x-large) and (max-width: $breakpoint-xxl) {
    .width-sm {
        width: 40%;
    }

    .width-lg {
        width: 70%;
    }
}

@media (min-width: $breakpoint-xx-large) {
    .width-sm {
        width: 25%;
    }

    .width-lg {
        width: 60%;
    }
}

.form-help {
    color: rgba(var(--color-1-rgb),.5);
    cursor: pointer;

    &:hover,
    &[aria-describedby] {
        color: var(--color-1);
    }
}

/*------------------------------------------------------------------
[4.2 - Card]
*/
.card {
    border: 0;
    box-shadow: 0px 2px 30px rgba(var(--color-1-rgb),.1);

    &:not(.uploader-card) {
        border-radius: 2rem;
    }

    &.uploader-card {
        border-radius: 4rem;
    }

    &-body {
        padding: 2rem;
    }

    &-heading {
        position: relative;
        color: var(--color-2);
        font-size: 1.5rem;
        font-weight: 700;

        &::after {
            content: "";
            position: absolute;
            width: 2rem;
            height: .25rem;
            right: 0;
            bottom: 0;
            background: var(--color-1);
            border-radius: 1rem;
        }
    }
}

/*------------------------------------------------------------------
[4.3 - Buttons]
*/
.btn-close:focus {
    box-shadow: none !important;
}

.btn-color-1 {
    @include base-button (white, var(--color-1), var(--color-1));
    @include transition(all .5s ease);

    &:hover {
        background: var(--color-2) !important;
        border-color: var(--color-2) !important;
    }
}

.btn-color-2 {
    @include base-button (white, var(--color-2), var(--color-2));
    @include transition(all .5s ease);

    &:hover {
        background: var(--color-1) !important;
        border-color: var(--color-1) !important;
    }
}

.btn-color-3 {
    @include base-button (var(--color-2), white, white);
    @include transition(all .5s ease);

    &:hover {
        color: white !important;
        background: var(--color-1) !important;
        border-color: var(--color-1) !important;
    }
}

.btn-color-4 {
    @include base-button (var(--color-3), var(--color-4), var(--color-4));
    @include transition(all .5s ease);

    &:hover {
        color: white !important;
        background: var(--color-1) !important;
        border-color: var(--color-1) !important;
    }
}

.btn-header {
    @include base-button (var(--color-3), var(--color-4), var(--color-4));
    
    @media (min-width: $breakpoint-small) {
        padding: .75rem 1.125rem;
    }

    @media (max-width: $breakpoint-sm) {
        padding: .75rem;
    }
}

.btn-action {
    @include base-button (var(--color-3), var(--color-4), var(--color-4));
    padding: .75rem;
}

/*------------------------------------------------------------------
[4.4 - Background]
*/
.covered {
    @include base-bg (cover);
}

.contained {
    @include base-bg (contain);
}

/*------------------------------------------------------------------
[4.5 - Alert]
*/
.alert-1 {
    @include alert-style (var(--color-6), rgba(var(--color-6-rgb),.1));
}

.alert-2 {
    @include alert-style (var(--color-7), rgba(var(--color-7-rgb),.1));
}

.alert-3 {
    @include alert-style (var(--color-1), rgba(var(--color-1-rgb),.1));
}

/*------------------------------------------------------------------
[4.6 - Dropdown]
*/
.dropdown-toggle::after {
    margin-left: .25rem;
    font-size: .8rem;
    font-family: "font awesome 6 free";
    font-weight: 600;
    content: "\f078";
    vertical-align: middle;
    border: 0;
    transition: color .15s, transform .5s ease;
}

.dropdown-menu {
    padding: .5rem;
    border-radius: 1rem;
    border: 0;
    box-shadow: 0px 2px 20px rgba(var(--color-1-rgb),.05);

    &:not(.output-dropdown):not(.file-dropdown) {
        min-width: 15rem;
    }

    &.file-dropdown {
        min-width: 100%;

        .dropdown-item {
            font-size: 1rem;
            cursor: pointer;
        }
    }

    &.output-dropdown {
        min-width: 21rem;

        .output-dropdown-item {
            font-size: .875rem;
            font-weight: 500;
            color: var(--color-3);
            padding: .5rem;
            background: var(--color-4);
            border-radius: .5rem;
            cursor: pointer;

            &:hover {
                background: rgba(var(--color-1-rgb),.1);
            }
        }
    }

    .dropdown-item {
        color: var(--color-3);
        font-size: 1.125rem;
        padding: .5rem .75rem;
        @include transition(all .5s ease);

        &:hover {
            background: var(--color-4);
            border-radius: .25rem;

            > div:first-child {
                color: var(--color-1) !important;
            }
        }
    }
}

/*------------------------------------------------------------------
[4.7 - Accordion]
*/
.accordion {
    &-item {
        overflow: hidden;
    }

    &-header {
        cursor: pointer;
        border-color: rgba(var(--color-3-rgb),.1);
    }

    &-button {
        color: var(--color-3) !important;
        font-size: 1.125rem;
        font-weight: 600;
        background: transparent !important;
        padding: 1.5rem 1.5rem 1.5rem 0;
        box-shadow: none !important;

        &:focus {
            box-shadow: none;
        }

        &:not(.collapsed)::after {
            color: var(--color-1);
            transform: rotate(45deg);
        }

        &::after {
            background-image: none !important;
            content: '\2b';
            font-family: "font awesome 6 free";
            color: var(--color-1);
            font-size: 1.125rem;
            font-weight: 600;
        }
    }

    &-body {
        color: var(--color-3);
        font-size: 1.125rem;
        padding: 0 1.5rem 1.5rem 0;
        background: transparent;

        &:focus {
            box-shadow: none;
        }
    }
}

/*------------------------------------------------------------------
[4.8 - Mask]
*/
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-2);
    opacity: .65;
    pointer-events: none;
}

/*------------------------------------------------------------------
[4.9 - Dropzone]
*/
.dropzone {
    border: 0 !important;
    padding: 0 !important;
    color: var(--color-3);

    &-intro {
        padding: 8rem 0;
    }

    .dropdown-toggle::after {
        display: none;
    }

    h2 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .upload-info-text {
        color: var(--color-3);
        font-weight: 300;
    }

    .dz-clickable {
        cursor: pointer !important;
    }

    &-scroll {
        min-height: 264px !important;
    }

    &-previews-inner {
        border-radius: 1rem;
        padding: 1.25rem;
        border: 2px solid var(--color-4);
    }

    .file-extension {
        height: 5rem;
        background: var(--color-4);
        border: 1px solid rgba(var(--color-1-rgb),.1);
        border-radius: 1rem;

        span {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--color-1);
            opacity: .25;
        }
    }

    .file-thumb {
        height: 5rem;
        border-radius: 1rem;
    }

    &-file-info {
        color: var(--color-3);

        .file-name {
            font-weight: 500;
        }

        .file-size {
            font-weight: 300;
        }
    }

    .output-label {
        position: absolute;
        top: -1.25rem;
        right: -1px;
        height: 2rem;
        padding: .25rem .5rem;
        background: var(--color-4);
        border: 1px solid var(--color-4);
        border-radius: .5rem;
        line-height: 1;
        font-size: .75rem;
        font-weight: 300;
    }

    .output-button {
        background: white;
        border: 1px solid var(--color-4) !important;
        font-size: .875rem;
        font-weight: 300;
        padding: .5rem;

        @media (min-width: $breakpoint-small) {
            min-width: 6rem;
            border-radius: .5rem 0 .5rem .5rem !important;
        }

        @media (max-width: $breakpoint-sm) {
            min-width: 3rem;
            border-radius: .5rem !important;
        }
    }

    &-toolbar {
        i {
            color: rgba(var(--color-3-rgb),.75);
        }

        .dropzone-tools,
        .result-button {
            background: var(--color-4);
            border: 1px solid var(--color-4);
            border-radius: .5rem;
            padding: .5rem;
        }

        .dropzone-start,
        .dropzone-settings,
        .dropzone-delete,
        .result-button {
            cursor: pointer;
            @include transition(all .5s ease);
        }

        .dropzone-start,
        .dropzone-settings,
        .result-button:not(.clear-file) {
            &:hover i {
                color: var(--color-3);
            }
        }

        .dropzone-delete,
        .clear-file {
            &:hover i {
                color: var(--color-6) !important;
            }
        }

        .open-file {
            color: var(--color-3);
            font-size: .875rem;
            font-weight: 500;

            &:hover {
                color: white !important;
                background: var(--color-1) !important;
                border-color: var(--color-1) !important;
            }
        }
    }

    .progress {
        height: .25rem;

        &-bar {
            background: var(--color-1);
        }
    }

    &-process {
        color: var(--color-1);
    }

    &-error {
        color: var(--color-6);
    }

    &-success {
        color: var(--color-5);
    }

    ::-webkit-scrollbar {
        width: .5rem;
    
        &-track {
            background: #f1f1f1;
            border-radius: 1rem;
        }
    
        &-thumb {
            background: rgba(var(--color-3-rgb),.25);
            border-radius: .5rem;
        }
    }
}

/*------------------------------------------------------------------
[4.10 - Loader]
*/
.page-loader {
    position: fixed;
    display: flex;
    background: white;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
}

/*------------------------------------------------------------------
[4.11 - Scroll]
*/
.scroll-light {
    overflow-y: overlay;

    &::-webkit-scrollbar {
        width: .5rem;

        &-track {
            background: #f1f1f1;
            border-radius: 1rem;
        }

        &-thumb {
            background: rgba(var(--color-2-rgb),.25);
            border-radius: .5rem;
        }
    }
}

.os-theme-dark {
    --os-handle-bg: rgba(var(--color-2-rgb),.25) !important;
    --os-handle-bg-hover: rgba(var(--color-2-rgb),.5) !important;
    --os-handle-bg-active: rgba(var(--color-2-rgb),.5) !important;
}

.go-to-top {
    position: fixed;
    left: 1.5rem;
    height: 55px;
    width: 55px;
    display: none;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    @include transition(all .5s ease);
    z-index: 2;

    &.scrolling {
        opacity: 1;
        visibility: visible;
    }

    &[data-cookies="notaccepted"] {
        bottom: calc(1.5rem + 80px);
    }

    &[data-cookies="accepted"] {
        bottom: 1.5rem;
    }

    &-progress {
        display: block;
        height: calc(100% - 8px);
        width: calc(100% - 8px);
        background-color: white;
        border-radius: 50%;
        display: grid;
        place-items: center;
    }
}

/*------------------------------------------------------------------
[4.12 - Cursor]
*/
.cursor-follower {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translateZ(0);
    opacity: 0;
    @include transition(opacity .65s cubic-bezier(.23,1,.32,1));

    &-inner {
        margin-left: -2px;
        margin-top: -2px;
        width: 4px;
        height: 4px;
        background-color: var(--color-1);
        z-index: 10000001;
    }

    &-outer {
        margin-left: -10px;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(var(--color-1-rgb),.5);
        opacity: .8;
        @include transition(.1s);
        z-index: 10000000;
    }
}

/*------------------------------------------------------------------
[4.13 - Switch]
*/
.switcher {
    width: 34px;
    height: 66px;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2;

    .slider {
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-1);
        border-radius: 30px;
        @include transition(all .4s ease);

        &:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            border-radius: 50%;
            @include transition(all .4s ease);
            z-index: 1;
        }

        i {
            left: 50%;
            transform: translateX(-50%);

            &:first-child {
                top: 1rem;
                color: white;
            }

            &:last-child {
                bottom: 1rem;
            }
        }
    }

    input {
        opacity: 0;
        width: 0;
        height: 0;

        &:checked +.slider {
            background-color: white;

            &:before {
                transform: translateY(-32px);
                background-color: var(--color-1);
            }

            i:last-child {
                color: var(--color-1);
            }
        }
    }

    &-form {
        width: 25rem;
        height: 3rem;
        z-index: 1;

        @media (max-width: $breakpoint-sm) {
            width: 22rem;
        }

        .slider {
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
            border-radius: 1.25rem;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            @include transition(all .4s ease);

            &:before {
                position: absolute;
                content: "";
                width: 50%;
                height: 2.5rem;
                left: .25rem;
                bottom: .25rem;
                background-color: var(--color-1);
                color: white;
                border-radius: 1rem;
                @include transition(all .4s ease);
                z-index: 1;
            }

            span {
                font-size: 1.125rem;
                width: 50%;
                top: 50%;
                transform: translate(0,-50%);
                @include transition(all .4s ease);
                z-index: 2;

                &:first-child {
                    left: 0;
                    color: white;
                }

                &:last-child {
                    right: 0;
                    color: var(--color-1);
                }
            }
        }

        input {
            opacity: 0;
            width: 0;
            height: 0;
    
            &:checked +.slider {
                background-color: white;
    
                &:before {
                    transform: translateX(calc(100% - .5rem));
                    background-color: var(--color-1);
                }
    
                span {
                    &:first-child {
                        color: var(--color-1);
                    }

                    &:last-child {
                        color: white;
                    }
                }
            }
        }
    }
}

/*------------------------------------------------------------------
[4.14 - Cookie]
*/
.cookie-opener {
    position: fixed;
    bottom: 10px;
    left: 1.5rem;
    height: 94px;
    aspect-ratio: cos(30deg);
    mask: conic-gradient(from 240deg at calc(200% - 3*20px/2),#000 60deg,#0000 0) 100% 0/calc(100% - 3*20px/2) 100% no-repeat, radial-gradient(20px at calc(2*20px) 50%,#000 98%,#0000 101%), radial-gradient(20px at top calc(tan(60deg)*20px) right 20px,#000 98%,#0000 101%), radial-gradient(20px at bottom calc(tan(60deg)*20px) right 20px,#000 98%,#0000 101%);
    -webkit-mask: conic-gradient(from 240deg at calc(200% - 3*20px/2),#000 60deg,#0000 0) 100% 0/calc(100% - 3*20px/2) 100% no-repeat, radial-gradient(20px at calc(2*20px) 50%,#000 98%,#0000 101%), radial-gradient(20px at top calc(tan(60deg)*20px) right 20px,#000 98%,#0000 101%), radial-gradient(20px at bottom calc(tan(60deg)*20px) right 20px,#000 98%,#0000 101%);
    clip-path: polygon(0 50%,100% 100%,100% 0);
    background: linear-gradient(45deg,var(--color-1),var(--color-1));
    cursor: pointer;
    transform: rotate(180deg);
    z-index: 2;

    > svg {
        margin-right: 8px;
        transform: rotate(-180deg);
    }

    > i {
        margin-right: 10px;
        color: white;
    }
}

#cookies-policy {
    position: fixed;
    background: white;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.5);
    border-radius: 2rem;
    max-height: 0;
    left: 6rem;
    bottom: 1.5rem;
    transition: .5s max-height linear;
    z-index: 9999;

    @media (min-width: $breakpoint-small) {
        width: 21rem;
    }

    @media (max-width: $breakpoint-sm) {
        width: 17rem;
    }

    &.cookies-policy-opened {
        max-height: 100% !important;
    }

    > div {
        padding: 1.5rem;
    }

    .cookies-details {
        border-top: 1px solid rgba(var(--color-2-rgb),.2);

        > a,
        label {
            color: var(--color-2);
            font-size: 1.125rem;
            font-weight: 700;
        }

        .customize-cookies-inner {
            @media (min-width: $breakpoint-small) {
                height: 170px;
            }
        
            @media (max-width: $breakpoint-sm) {
                height: 60px;
            }

            p {
                color: var(--color-3);
            }
        }
    }
}
