/*------------------------------------------------------------------
[3 - Components]
*/
/*------------------------------------------------------------------
[3.1 - Form]
*/
.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 {
    background-image: url("../image/chevron.svg");
    height: 3.250rem;
    padding: 0 3.5rem 0 1.25rem;
    line-height: 3;
}

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

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

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

input[type=number] {
    appearance: textfield;

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

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

.input-icon {
    position: relative;

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

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

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

.error {
    color: var(--color-2);
    font-size: .875rem;
}

.table-select {
    min-width: 10rem;
}

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

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

/*------------------------------------------------------------------
[3.2 - Card]
*/
.card {
    border-radius: 2rem;
    border: 0;
    box-shadow: 0 .05rem .10rem rgba(0,0,0,.05);

    &-body {
        padding: 2rem;
    }

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

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

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

    > i {
        pointer-events: none;
    }
}

.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-2), 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-sm-1 {
    @include action-button (var(--color-1));
}

.btn-sm-2 {
    @include action-button (var(--color-2));
}

.btn-sm-3 {
    @include action-button (var(--color-5));
}

.action-button {
    color: var(--color-3) !important;
    font-weight: 500;
    border-radius: .75rem;
    margin: auto 0;
    display: inline-block;
    padding: .5rem .75rem;

    &[data-bg="gray"] {
        background: var(--color-4) !important;

        &:active,
        &.show  {
            border-color: var(--color-4) !important;
        }
    }

    &[data-bg="white"] {
        background: white !important;

        &:active,
        &.show  {
            border-color: white !important;
        }
    }

    i {
        pointer-events: none;
    }

    > label {
        color: var(--color-2) !important;
        border-radius: .75rem;
    }

    .btn-check:checked +.btn {
        background-color: white;
        border-color: white;
        box-shadow: 0 .05rem .10rem rgba(0,0,0,.05);
    }
}

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

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

/*------------------------------------------------------------------
[3.5 - Badges]
*/
.badge-1 {
    @include base-badge (var(--color-1));
}

.badge-2 {
    @include base-badge (var(--color-2));
}

.badge-3 {
    @include base-badge (var(--color-5));
}

.badge-4 {
    @include base-badge (var(--color-3));
}

/*------------------------------------------------------------------
[3.6 - 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));
}

/*------------------------------------------------------------------
[3.7 - 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;
}

/*------------------------------------------------------------------
[3.8 - Dropdown]
*/
.dropdown-menu {
    border: 1px solid var(--color-4);
    padding: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);

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

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

/*------------------------------------------------------------------
[3.9 - Dropzone]
*/
.dropzone {
    height: calc(19rem - 2px);
    border-radius: 1rem;
    border: 2px dashed var(--color-1) !important;
    color: var(--color-3);

    h2 {
        font-size: 1.125rem;
        font-weight: 700;
    }

    span {
        color: var(--color-3);
        font-weight: 300;
    }

    .uploader-icon::before {
        content: url("../image/uploader-icon.svg") !important;
    }

    &-results {
        height: 0;
        overflow-y: hidden;

        &.show {
            height: auto !important; 
            overflow-y: unset !important;
        }
    }

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

    .dz-error-message {
        display: none !important;
    }

    .dropzone-previews,
    .dropzone-links {
        overflow-x: hidden;
        
        .dropzone-previews-inner {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 10;
        }
    }

    .dz-preview {
        background: var(--color-4) !important;
        border-radius: 1rem;
        max-height: 100px;

        @media (min-width: $breakpoint-x-large) {
            width: calc(25% - 2rem);
        }

        @media (min-width: $breakpoint-large) and (max-width: $breakpoint-xl) {
            width: calc(calc(100% / 3) - 2rem);
        }

        @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-lg) {
            width: calc(25% - 2rem);
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            width: calc(calc(100% / 3) - 2rem);
        }

        @media (max-width: $breakpoint-sm) {
            width: calc(50% - 2rem);
        }

        .dz-remove {
            display: flex !important;
            justify-content: center;
            align-items: center;
            height: 1.65rem;
            width: 1.65rem;
            font-size: 1rem !important;
            text-indent: -9999px;
            white-space: nowrap;
            position: absolute;
            background-color: white !important;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            border-radius: 100%;
            top: -.825rem;
            right: -.825rem;
            z-index: 21;
    
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                display: block;
                mask-size: 40%;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: rgba(var(--color-3-rgb),.5);
                mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(173 181 196)'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
            }
        }
    
        .dz-progress {
            height: 100% !important;
            width: 0;
            left: 0 !important;
            top: 0 !important;
            margin-top: unset !important;
            margin-left: unset !important;
            background: var(--color-4) !important;
            border-radius: 1rem !important;
            animation: none !important;
        }
    
        .dz-filename,
        .dz-size {
            display: none !important;
        }

        .dz-size {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dz-image {
            width: 100% !important;
            height: 100% !important;
            border-radius: 1rem !important;

            img {
                width: 100% !important;
                height: 100% !important;
                min-height: 100px !important;
                max-height: 100px !important;
            }
        }

        &:hover .dz-image img {
            transform: none !important;
            filter: none !important;
        }

        .image-opener {
            position: absolute;
            background: var(--color-1);
            width: 2.25rem;
            height: 2.25rem;
            right: .5rem;
            bottom: .5rem;
            border-radius: .5rem .5rem 1rem .5rem;
            cursor: pointer;
            z-index: 1001;

            i {
                color: white;
            }
        }
    }

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