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

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4A5568;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #2D3748;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #1A202C;
    border-radius: 4px;
}

@keyframes blurIn {
    0% {
        backdrop-filter: blur(0);

        opacity: 0;
    }
    100% {
        backdrop-filter: blur(5px);

        opacity: 1;
    }
}

@keyframes blurOut {
    0% {
        backdrop-filter: blur(5px);

        opacity: 1;
    }
    100% {
        backdrop-filter: blur(0);

        opacity: 0;
    }
}

.acc-active {
    animation: blurIn 0.5s forwards;
}

.acc-inactive {
    animation: blurOut 0.5s forwards;
}

nav {
    -webkit-app-region: drag;
    height: 35px;
    display: flex;
    align-items: center;
}

.nav-buttons {
    display: flex;
    width: 80px;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}
.nav-buttons > button {
    border: none;
    aspect-ratio: 1;
    border-radius: 50%;
    height: 15px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    /* shouldn't be able to drag
      : drag blocks cursor events */
}

.closeWindow {
    background: #FF605C;
}

.minimalizeWindow {
    background: #FFBD44;
}

.maximizeWindow {
    background: #00CA4E;
}

.windowTitle {
    user-select: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}