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

/* width */
::-webkit-scrollbar {
    width: 6px !important;
    height: 4px !important;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(105, 104, 104) !important;
    border-radius: 5px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #6d6c6c !important;
}

html {
    scroll-behavior: smooth !important;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/ad3cd4cbda94aee8578c1b622b9002f9dfe345c05870eb375a02da853d08f072.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/046a76746039189feb148c360dfb82d07a1e3464d31a2078363587af6f5a1cfb.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/d783603a0dd07db6896ecd8a3460e2256a48dca62373a0478706a05490c1a2d8.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/fc6648da06acebfe96ad5a8f077f569c5c4dd75b77122951723ddfbfeb191728.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/3b2277e82a583c9f91de41aa9e198a14d7ef7f4ccd04828abdd623acd116a88b.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("../../public/fonts/71671477a4b62305fbd3ed4976a31c3c08520cf914656ece6b79543524a49132.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}

* {
    font-family: Vazir, sans-serif !important;
    direction: rtl !important;
}

::placeholder {
    font-family: Vazir, sans-serif !important;
    direction: rtl !important;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown_container {
    display: none;
    position: absolute;
    top: calc(100%);
    right: 0;
    width: 200px;
    padding: 10px;
    transition: display 1s ease;
    /* Add transition for display property */
}

.dropdown:hover .dropdown_container,
.dropdown:hover .drop_down_menu_aside {
    display: block;
}

.dropdown_menu::before {
    content: '';
    position: absolute;
    top: 1px;
    right: 25px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(31 41 55);
}


aside#side_bar {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0;
    bottom: 0;
    right: -500px;
    width: 250px;
    z-index: 1000;
    background-color: white;
    transition: all 0.5s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px;
}

aside#side_bar.open {
    right: 0;
}

.aside_item {
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    font-size: 14px;
    font-weight: bold;
}

.aside_item:hover {
    background-color: rgb(226, 226, 226);
}

.drop_down_menu_aside {
    display: none;
    position: absolute;
    top: 0px;
    right: 100%;
    width: 200px;
    transition: display 1s ease;
}

.drop_down_menu_aside::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(31, 41, 55);
}