.sidebar {
    gap: var(--spacing-1);
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100vh;
    grid-template-columns: 70% 1fr;
    visibility: hidden;
    transition: transform 500ms ease-in-out;
    transform: translateX(-100%);
    z-index: 13;
}

.sidebar__content {
    background-color: var(--surface2);
}

.sidebar__close {
    inline-size: 100%;
    block-size: 100%;
}

.sidebar__close, 
.hamburger {
    -webkit-tap-highlight-color: transparent;
}

:target {
    visibility: visible;
    transform: translateX(0%);
}

.sidebar__top {
    inline-size: 100%;
    block-size: 100px;
    border-block-end: 1px solid var(--surface4);
    padding-inline: var(--spacing-12);
    padding-block: var(--spacing-6);
    background-color: var(--text2);
    color: var(--surface4);
}

.sidebar--clear {
   margin-block-start: 6px;
}

.sidebar__top-list {
    align-items: center;
    justify-content: space-between;
}

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

.clear-icon {
    block-size: min-content;
    color: var(--surface4);
}

.sidebar__title {
    font-size: var(--fs-700);
    color: var(--surface4);
    margin-block-end: 7px;
}

.sidebar__bottom {
    inline-size: 100%;
    block-size: calc(100vh - 100px);
    overflow: hidden;
    overflow-y: auto;
    padding-block-end: var(--spacing-12);
}

.sidebar__list {
    gap: var(--spacing-12);
    flex-direction: column;
    padding-inline: var(--spacing-12);
    padding-block: var(--spacing-12);
    border-block-end: 1px solid var(--surface4);
}

.sidebar__list-item {
    text-decoration: none;
    color: var(--text2);
    font-size: var(--fs-400);
    font-weight: bold;
}

.sidebar__list-item a {
    display: block;
    color: unset;
}

.sidebar__list-category {
    font-size: var(--fs-600);
    color: var(--text2);
}

@media (min-width: 1000px) {
    .sidebar {
        display: none;
    }
}