// Contains custom UI components styling.

// circled avatar

.logo-img {
    width: 117px;
    height: 117px;
    border-radius: 50%;
    box-shadow: 0px 3px 6px var(--box-shadow-dark);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    img {
        width: 100%;
    }
}
.admin-filter-menu {
    width: 375px;
    min-height: 221px;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 12px;
    position: absolute;
    right: 72%;
    top: 35px;
    z-index: 1;

    .ant-form-item {
        margin-bottom: 16px !important;
    }

    .primary-input,
    .select-option-primary {
        width: 201px !important;
    }
}
.profile-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    box-shadow: 0px 3px 6px #00000029;

    border-radius: 50%;
    vertical-align: middle;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

// secondary - for student profile
.secondary-profile-image {
    img {
        right: 24px;
    }

    .secondary-profile-overlay {
        display: none;
        transition: all 0.3s ease-in-out;
    }

    &:hover .secondary-profile-overlay {
        width: 100%;
        height: 100%;
        background: #000000 0% 0% no-repeat padding-box;
        opacity: 0.66;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        border-radius: 50%;
        text-align: center;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.back-arrow-link {
    display: flex;
    align-items: center;
    width: max-content;

    &,
    &:hover {
        color: $color-secondary;
    }

    font-weight: 600;
    font-size: 18px;

    img {
        margin-right: 14px;
    }
}

// RTL styling overrides
*[dir="rtl"] .back-arrow-link {
    img {
        margin-right: 0;
        margin-left: 14px;
        transform: rotate(180deg);
    }
}

// multi select chips

.chips-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    li {
        width: max-content;
        height: 34px;
        background: #f5f5f5 0% 0% no-repeat padding-box;
        border-radius: 17px;
        padding: 6px 7px;
        color: #7e7e7e;
        cursor: pointer;
        margin: 0 8px 8px 0;

        transition: all 0.2s ease-in-out;
    }

    li.active {
        border: 1px solid $color-secondary;
        color: $color-secondary;
        background: #f2f2ff;
    }
}

// staus
.primary-status {
    img {
        margin-right: 13px;
        display: inline-block;
    }

    span {
        text-transform: capitalize;
    }
}

// table status
.table-status {
    display: inline-block;
    min-width: 79px;
    height: 31px;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 4px;
    padding: 5px 9px;
    text-align: center;
}
.table-status-active {
    border: 1px solid #089752;
    color: #089752;
}
.table-status-inactive {
    border: 1px solid #ff4e4e;
    color: #ff4e4e;
}

// RTL styling overrides
*[dir="rtl"] .primary-status {
    img {
        margin-right: 0 !important;
        margin-left: 13px;
    }
}

// tree preview component
.tree-preview-card {
    width: 521px;
    height: 339px;
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    padding: 16px 30px;
    overflow-y: auto;

    // hide default tree container bg
    .ant-tree {
        background-color: transparent;
    }

    .ant-tree-show-line .ant-tree-switcher {
        background: transparent !important;
    }

    .ant-tree-title {
        font-weight: 500;
    }
}

// ! remove if it effect other components
.ant-tree-rtl {
    .ant-tree-indent-unit::before {
        left: 12px !important;
    }
}

// primary select
.primary-select,
.primary-lang-select {
    .ant-select-selector {
        border-color: #d4d4d4 !important;
        box-shadow: none !important;
    }
}

//.ant-select-dropdown {
//    position: fixed !important;
//}

// draggable list component
// @list-item
.draggable-list-item {
    width: 100%;
    min-height: 160px;
    background: #f9f9f9 0% 0% no-repeat padding-box;
    border: 1px solid #d4d4d4;
    border-radius: 0px 0px 4px 4px;

    &__header {
        width: 100%;
        height: 40px;
        background: #fff 0% 0% no-repeat padding-box;
        margin: 0;
        border-bottom: 1px solid #d4d4d4;
        padding: 13px 0;
        line-height: 13px;
    }

    &__content {
        padding: 11px 15px;
    }
}

// profile preview - circled

.upload-single-preview {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

// custom stepper component

.stepper-container {
    min-height: 245px;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #ebebeb;
    padding: 34px 27px;
    border-radius: 8px;

    .stepper-icon {
        width: max-content;
        margin-top: 0px;
    }

    .step {
        &:not(:last-child) .stepper-icon::after {
            content: "";
            display: block;
            width: 0px;
            height: 22px;
            border-left: 1px solid #d6d6d6;
            margin: -1px auto;
        }

        .title {
            margin-left: 19px;
        }
    }

    .active-step {
        .stepper-icon svg circle {
            fill: $color-primary;
        }
    }
}

*[dir="rtl"] .stepper-container {
    .step .title {
        margin-left: 0 !important;
        margin-right: 19px;
    }
}

//registration form number input
.phone-number {
    width: 100%;

    .react-tel-input {
        width: 100% !important;

        .form-control {
            width: 70%;
        }
    }
}

// status
.conditionally-accepted-status {
    color: #262626;
}
.approved-status {
    color: $color-primary;
}
.pending-status {
    color: #f59535;
}
.rejected-status {
    color: #ff4e4e;
}

.edit-icon {
    svg {
        width: 24px !important;
        height: 24px !important;

        path {
            fill: #1a60ec !important;
        }
    }
}

.view-eye-icon {
    svg {
        width: 18px !important;
        height: 18px !important;

        path {
            fill: #089752 !important;
        }
    }
}

.warning-alert {
    background-color: #fff3cd;
    border: 1px solid #f5dd90;
    padding: 14px;
    margin: 10px 0;
    border-radius: 5px;
    color: #030303;
}

.reject-alert {
    background-color: #ffdddd;
    border: 1px solid #ffdddd;
    padding: 14px;
    margin: 10px 0;
    border-radius: 5px;
    color: #030303;
}