.drawer {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-layout-gap);
    min-width: 300px;
    max-width: 400px;
}

.drawer__header {
    display: flex;
    column-gap: var(--size-ui-gap);
    padding: 5px;
    border: 1px solid var(--color-lines);
    border-radius: var(--size-layout-radius);
    background: var(--color-content-bg);
}

.drawer__header a {
    --size-icon: 24px;

    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    padding: 8px;
    border-radius: var(--size-ui-radius);
    color: inherit;
    transition: all 0.3s;

    &:is(:active, :focus, :hover) {
        background-color: var(--color-accent-bg);
    }
}