shared.css

*, *::before, *::after {
    box-sizing: border-box;
}

button:disabled, .disabled {
    @apply .opacity-25 .cursor-not-allowed;
}

.global-sidebar {
    width: 264px;
}

/* Tiggle swicth */

.toggle-label {
    @apply relative block w-10 h-5 cursor-pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

.toggle-label:before {
    content: "";
    @apply relative block bg-grey;
    position: relative;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 14px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.toggle-label span {
    @apply absolute w-5 h-5 pin-t pin-l block bg-white shadow-md rounded-full;
    transition: all 0.2s ease;
}

.toggle-label span:before {
    content: "";
    @apply absolute block w-14 h-14 bg-primary-400 pointer-events-none opacity-100 rounded-full;
    margin: -18px;
    transform: scale(0);
}

.toggle-input:checked+.toggle-label:before {
    @apply bg-primary-400;
}

.toggle-input:checked+.toggle-label span {
    @apply bg-primary-500;
    transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}

.toggle-input:checked+.toggle-label span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
}

/* Checkbox */

.checkbox-label {
    @apply select-none .cursor-pointer;
}

.checkbox-label span {
    @apply inline-block align-middle;
    transform: translate3d(0, 0, 0);
}

.checkbox-label span:first-child {
    @apply relative rounded align-middle border;
    width: 18px;
    height: 18px;
    transform: scale(1);
    transition: all 0.2s ease;
}

.checkbox-label span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.checkbox-label span:first-child:before {
    content: "";
    @apply bg-primary-500 w-full h-full block opacity-100 rounded-full;
    transform: scale(0);
}

.checkbox-label span:last-child {
    padding-left: 8px;
}

.checkbox-label:hover span:first-child {
    @apply bg-primary-100 border-primary-500;
}

.checkbox-input:checked+.checkbox-label span:first-child {
    @apply bg-primary-500 border-primary-500;
    animation: wave 0.4s ease;
}

.checkbox-input:checked+.checkbox-label span:first-child svg {
    stroke-dashoffset: 0;
}

.checkbox-input:checked+.checkbox-label span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}

@keyframes {
    50% {
        transform: scale(0.9);
    }
}

/* Tabs */

.nav-tab-item {
    position: relative;
}

.nav-tab-item:first-child {
    @apply rounded-tl;
}

.nav-tab-item:last-child {
    @apply rounded-tr;
}

.nav-tab-item--selected:before {
    @apply absolute w-full pin-t pin-l;
    content: '';
    height: 3px;
    background-color: theme('colors.primary');
}

.nav-tab-item--selected:after {
    position: absolute;
    content: '';
    bottom: -2px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: white;
}

/* Loading Spinner */

.loading-spinner {
    width: 66px;
    height: 66px;
    -webkit-animation: contanim 2s linear infinite;
    animation: contanim 2s linear infinite;
}

.loading-spinner svg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.loading-spinner svg:nth-child(1) circle {
    stroke: #6025C0;
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
    -webkit-animation: strokeanim 3s calc(.2s * (1)) ease infinite;
    animation: strokeanim 3s calc(.2s * (1)) ease infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.loading-spinner svg:nth-child(2) circle {
    stroke: #F61067;
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
    -webkit-animation: strokeanim 3s calc(.2s * (2)) ease infinite;
    animation: strokeanim 3s calc(.2s * (2)) ease infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.loading-spinner svg:nth-child(3) circle {
    stroke: #FFAB00;
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
    -webkit-animation: strokeanim 3s calc(.2s * (3)) ease infinite;
    animation: strokeanim 3s calc(.2s * (3)) ease infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.loading-spinner svg:nth-child(4) circle {
    stroke: #1F0D40;
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
    -webkit-animation: strokeanim 3s calc(.2s * (4)) ease infinite;
    animation: strokeanim 3s calc(.2s * (4)) ease infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes strokeanim {
    0% {
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -58.548324585;
    }
    100% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -175.6449737549;
    }
}

@keyframes strokeanim {
    0% {
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -58.548324585;
    }
    100% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -175.6449737549;
    }
}

@-webkit-keyframes contanim {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes contanim {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.global-sidebar__primary-nav {
    @apply .w-full;
}

.global-sidebar__primary-nav--shrinked {
    width: 64px;
}

.global-sidebar__primary-nav-link {
    @apply .flex .text-white .text-sm .font-semibold .no-underline .items-center;
    position: relative;
}

.global-sidebar__primary-nav-link:hover {
    @apply .bg-primary-darker;
}

.global-sidebar__primary-nav-link--active {
    @apply .bg-gray-200 .text-primary-500;
    box-shadow: inset 4px 0 0 0 theme('colors.yellow');
    background-image: linear-gradient(to right, theme('colors.white'), theme('colors.grey-200'));
}

.global-sidebar__primary-nav-link--active:before, .global-sidebar__primary-nav-link--active:after {
    content: "";
    position: absolute;
    right: 0px;
    width: 16px;
    height: 16px;
}

.global-sidebar__primary-nav-link--active:before {
    top: -16px;
    border-radius: 0 0 50%;
    border-width: 0px 20px 0 0;
    box-shadow: 0px 8px theme(colors.grey-200);
    border-color: transparent;
}

.global-sidebar__primary-nav-link--active:after {
    bottom: -16px;
    border-radius: 0 50% 0;
    border-width: 0 20px 0 0;
    box-shadow: 0 -8px theme(colors.grey-200);
    border-color: transparent;
}

.global-sidebar__primary-nav-link--active:hover {
    @apply .bg-gray-200 .text-primary-500;
}

.blanket {
    bottom: 0px;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 500;
    background: rgba(9, 30, 66, 0.54);
}

.drawer-right {
    background-color: white;
    display: flex;
    height: 100vh;
    right: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 501;
}

@screen md {
    .drawer-right {
        @apply .w-4/5;
    }
}

@screen xl {
    .drawer-right {
        width: 48rem;
    }
}

.drawer-right__close {
    left: -52px;
    z-index: -1;
}

.drawer-right-form {
    background-color: #EDF3FA;
    overflow-x: hidden;
    overflow-y: scroll;
    @apply .text-sm;
}

.drawer-right-form__input {
    margin-bottom: 2rem;
}

.drawer-right-form__error-msg {
    color: red;
    margin-bottom: 0.715rem;
}

.hamburger {
    @apply p-4 inline-block .cursor-pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    @apply bg-grey-darker;
}

.hamburger-box {
    width: 20px;
    height: 14px;
    @apply relative inline-block;
}

.hamburger-inner {
    display: block;
    top: 50%;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -6px;
}

.hamburger-inner::after {
    bottom: -6px;
}

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-6px, 3px, 0) rotate(-45deg) scale(0.5, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-6px, -3px, 0) rotate(45deg) scale(0.5, 1);
}

.course-faculty__list-item:hover .course-faculty__list-item-remove {
    visibility: visible;
}

.resources-upload-tab__link {
    cursor: pointer;
    @apply border-transparent border-l border-t border-r -mb-px rounded-t;
}

.resources-upload-tab__link--active {
    background-color: #F2F8FF;
    @apply border-grey-400 border-l border-t border-r -mb-px rounded-t;
}

.resources-upload-tab__body {
    background-color: #F2F8FF;
}

.input-file__input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 43px;
    margin: 0;
    opacity: 0;
}

.input-file__label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 43px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #E6F1FF;
    border: 1px dashed #D3D8E1;
}

.input-file__container:hover .input-file__label {
    @apply .bg-grey-400;
}

.toggle-button__group {
    position: relative;
}

.toggle-button__group::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dae1e7;
}

.toggle-button__button {
    @apply w-1/2 bg-white text-sm font-semibold py-2 px-6 text-grey-dark;
    transition: .3s cubic-bezier(0, 0, 0, 1);
}

.toggle-button__button:hover {
    @apply bg-primary-100 text-purple-dark;
}

.toggle-button__button:focus {
    @apply outline-none;
}

.toggle-button__button--active {
    @apply bg-primary-dark text-white shadow-inner;
}

.toggle-button__button--active:hover {
    @apply bg-primary-dark text-white shadow-inner;
}

.target-group__container> :not(:last-child):before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    z-index: -1;
    @apply bg-grey-400;
}

.target-group__box {
    z-index: 10;
}

.target-group__target {
    width: 100%;
    transition: all 0.2s;
}

.target-group__header--archived, .target-group__target--archived {
    background-color: #fdfae5;
    background-image: linear-gradient(to bottom right, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent);
    background-repeat: repeat;
    background-size: 10px 10px;
    box-shadow: inset 0 2px 10px -6px rgba(0, 0, 0, 0.5);
}

.target-group__create, .target-group__target-create {
    transition: all 0.2s;
}

.target-group__create:hover, .target-group__target-create:hover {
    @apply .shadow-lg;
}

.quiz-maker__question-container:hover .quiz-maker__question-remove-button {
    visibility: visible;
}

.quiz-maker__question-container::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 110px);
    margin-top: 0.875rem;
    bottom: 0;
    width: 1px;
    background: #afdcf8;
    left: 1.5rem;
}

.quiz-maker__answer-option-pointer {
    width: 1.375rem;
    height: 1.375rem;
    position: absolute;
    color: #fff;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    text-align: center;
    border: 1px solid #fff;
    left: 13px;
    top: 10px;
    margin: 0;
    transition: .3s cubic-bezier(0, 0, 0, 1);
}

.quiz-maker__answer-option-pointer:hover {
    box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.1), inset 0 0 0 4px #39B54A;
}

.quiz-maker__answer-option-pointer--add {
    width: 1.75rem;
    height: 1.75rem;
    left: 10px;
    top: 8px;
    border: 0;
}

.quiz-maker__answer-option:hover .quiz-maker__answer-option-pointer--add {
    box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.1);
}

.quiz-maker__answer-option:hover .quiz-maker__answer-option-pointer--add img {
    filter: invert(1);
}

.quiz-maker__answer-option-pointer-img {
    width: 10px;
}

.quiz-maker__answer-option-pointer--correct {
    background: #10AB4C;
}

.select-list__item-selected {
    animation: glowing 500ms ease-in;
    @apply .border-indigo-400;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 20px #7886D7;
    }
    50% {
        box-shadow: 0 0 10px #7886D7;
    }
    100% {
        box-shadow: 0 0 0 #7886D7;
    }
}