@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

.font-inter_medium {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 500;
}

.font-inter_regular {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 0;
}

.sidebar_layout_desktop::-webkit-scrollbar,
.sidebar_layout_content::-webkit-scrollbar {
    width: 5px !important;
}

.sidebar_layout_content::-webkit-scrollbar {
    width: 7px !important;
}

.sidebar_layout_desktop::-webkit-scrollbar-thumb,
.sidebar_layout_content::-webkit-scrollbar-thumb {
    background-color: rgb(214, 214, 214);
}

/* loader */
.loading1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #42a8a0;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #21a8d1;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #42a8a0;
}

.sidebar_menu_line_clamp {
    white-space: nowrap;
    /* Matnni faqat bir qatorga joylashtiradi */
    overflow: hidden;
    /* Matn qator sig‘masa, kesadi */
    text-overflow: ellipsis;
    /* Kesilgan matn oxiriga "..." qo'shadi */
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.sidebar_mobile_animation_open {
    animation: sidebar_mobile_animation_width_open 0.2s alternate;
}

.sidebar_mobile_animation_close {
    animation: sidebar_mobile_animation_width_close 0.2s alternate;
}

.drawer_open {
    animation: drawer_open 0.2s alternate;
}

.drawer_close {
    animation: drawer_close 0.2s alternate;
}


.drawer_animation_open {
    animation: drawer_animation_open 0.2s alternate;
}

.drawer_visible_content {
    animation: drawer_animation_open .8s alternate;
}

@keyframes drawer_animation_open {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes drawer_open {
    0% {
        width: 0;
    }

    100% {
        width: 375px;
    }
}

/* sidebar open */
@media (max-width: 992px) {
    @keyframes sidebar_mobile_animation_width_open {
        0% {
            width: 0;
        }

        100% {
            width: 80%;
        }
    }

}

@media (max-width: 378px) {
    @keyframes sidebar_mobile_animation_width_open {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes drawer_open {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }
}

/* sidebar close */
@media (max-width: 768px) {
    @keyframes sidebar_mobile_animation_width_close {
        0% {
            width: 80%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes drawer_close {
        0% {
            width: 30%;
        }

        100% {
            width: 0;
        }
    }
}

@media (max-width: 320px) {
    @keyframes sidebar_mobile_animation_width_close {
        0% {
            width: 100%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes drawer_close {
        0% {
            width: 100%;
        }

        100% {
            width: 0;
        }
    }
}


/* darkmode */
.sidebar_switch_container label {
    width: 50px;
    height: 24px;
    position: relative;
    display: block;
    /* background: #ebebeb; */
    border-radius: 200px;
    box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.366), inset 0px -5px 10px rgba(255, 255, 255, 0.396);
    cursor: pointer;
    transition: 0.3s;
}

.sidebar_switch_container label:after {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    border-radius: 180px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar_switch_container label svg {
    position: absolute;
    width: 15px;
    top: 4px;
    z-index: 10;
}

.sidebar_switch_container label svg.sun {
    left: 4.5px;
    fill: #fff;
    transition: 0.3s;
}

.sidebar_switch_container label svg.moon {
    left: 31px;
    fill: #7e7e7e;
    transition: 0.3s;
}

.sidebar_switch_container input {
    width: 0;
    height: 0;
    visibility: hidden;
}

.sidebar_switch_container input:checked+label {
    background: #242424;
}

.sidebar_switch_container input:checked+label:after {
    left: 50px;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

.sidebar_switch_container input:checked+label svg.sun {
    fill: #7e7e7e;
}

.sidebar_switch_container input:checked+label svg.moon {
    fill: #fff;
}

.sidebar_switch_container input:checked+label+.background {
    background: #242424;
}

.sidebar_switch_container input:active:after {
    width: 60px;
}


/* animate microphone effect */
.box_sidebar_infinity {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.object_sidebar_infinity {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outline_sidebar_infinity {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #B5A4A4;
    animation: pulse 3s ease-out infinite;
    position: absolute;
}

.button_sidebar_infinity {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #50CDDD;
    box-shadow: 0px 0px 5px #0084F9;
    position: absolute;
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0;
        border: 4px solid #0B3082;
    }

    50% {
        border: solid #A3FFC2;
        opacity: 0.8;
    }

    90% {
        transform: scale(2.2);
        opacity: 0.2;
        border: 1px solid #2E3CFF;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
        border: 0.5px solid #7A89FF;
    }
}

#delayed {
    animation-delay: 0.5s;
}

#circlein {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6BD6E1;
    box-shadow: 0px -1px 3px #E0FF94;
    position: absolute;
}

.mic-icon_sidebar_infinity {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #1E2D70;
}

.mic-icon_sidebar_infinity_gray {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: gray;
}