special-pages/pages/history/app/components/Header.module.css
.root {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--history-text-normal);
    padding: 16px 0;
    border-bottom: 1px solid var(--history-surface-border-color);
}

.controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.largeButton {
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    border: none;
    border-radius: 4px;
    color: var(--history-text-normal);
    padding-left: 8px;
    padding-right: 8px;

    svg {
        flex-shrink: 0;
        fill-opacity: 0.84;
    }

    &:hover {
        background-color: var(--color-black-at-6);
        [data-theme="dark"] & {
            background-color: var(--color-white-at-6)
        }
    }

    &:active {
        background-color: var(--color-black-at-12);
        [data-theme="dark"] & {
            background-color: var(--color-white-at-12)
        }
    }

    &[aria-disabled="true"] {
        opacity: .3;
    }
}

.search {
    max-width: 238px;
    width: 100%;
    flex-shrink: 1;
    display: flex;
}
.form {
    width: 100%;
}
.label {
    color: inherit;
    display: block;
    position: relative;
}
.searchIcon {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    color: black;
    [data-theme="dark"] & {
        color: white;
    }
}
.searchInput {
    width: 100%;
    height: 28px;
    border-radius: 6px;
    border: 0.5px solid var(--history-surface-border-color);
    /* these precise numbers help it match figma when overriding default UI */
    padding-left: 31px;
    padding-right: 9px;
    background: inherit;
    color: inherit;

    [data-theme="dark"] & {
        background: var(--color-white-at-6);
        border-color: var(--color-white-at-9);
    }

    &:focus {
        outline: none;
        box-shadow: 0px 0px 0px 2.5px rgba(87, 151, 237, 0.64), 0px 0px 0px 1px rgba(87, 151, 237, 0.64) inset, 0px 0.5px 0px -0.5px rgba(0, 0, 0, 0.10), 0px 1px 0px -0.5px rgba(0, 0, 0, 0.10);
    }

    &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 13px;
        width: 13px;
        background-image: url("../../public/icons/clear.svg");
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
    }

    [data-theme="dark"] &::-webkit-search-cancel-button {
        background-image: url("../../public/icons/clear-dark.svg");
    }
}