.searchInput {
    input {
        /* magic number, sorry */
        padding-left: var(--spacing-GoldenUnit);
        border-radius: 0;

        &:focus {
            background: var(--colors-ContrastDark);
            color: var(--colors-ContrastBrightest);
        }
    }
}

.clearButton {
    background: transparent;
}

.hidden {
    display: none;
}

.placeholderIcon {
    position: absolute;
    left: var(--spacing-Full);
    height: var(--spacing-GoldenUnit);
}

.wrapper {
    display: flex;
    border-right: 1px solid var(--colors-ContrastDark);
    position: relative;
    width: calc((var(--size-SidebarWidth) / 2) - var(--spacing-Quarter));
}

.wrapper--focused {
    .clearButton {
        background: var(--colors-ContrastDark);
    }
}
