
/**
 * /src/css/header/header.css
 * 
 */
[data-view-name="HeaderView"] {
    height: var(--annex-search-header-height);
    background-color: var(--annex-search-header-background-color);
    position: relative;
}

/**
 * Hide
 * 
 * @see     https://chatgpt.com/c/68a62e0d-ff28-832e-a71c-2ffed89e85fe
 */
[data-view-name="HeaderView"] > div.hide {
    position: absolute;
    right: 10px;
    top: calc((var(--annex-search-header-height) - var(--annex-search-header-hide-button-size)) / 2);
    height: var(--annex-search-header-hide-button-size);
    width: var(--annex-search-header-hide-button-size);
    transform: rotate(45deg);
    background-color: var(--annex-search-header-hide-button-color);
    opacity: 0.30;
    cursor: pointer;
    transition: 250ms all;
    -webkit-mask-size: 14px !important;
            mask-size: 14px !important;
    -webkit-tap-highlight-color: transparent;
}
[data-view-name="HeaderView"] > div.hide:hover {
    transform: scale(1.20) rotate(135deg);
    opacity: 0.50;
}

/**
 * Spinner
 * 
 */
[data-view-name="HeaderView"] > div.spinner {
    display: none;
    position: absolute;
    right: calc(14px);
    top: calc((var(--annex-search-header-height) - 14px) / 2);
    height: 14px;
    width: 14px;
    background-color: var(--annex-search-header-spinner-color);
    opacity: 0.40;
}
[data-view-name="HeaderView"] > div.spinner.spinning {
    animation-duration: var(--annex-search-spinner-duration);
}

/**
 * State
 * 
 */
[data-view-name="RootView"][data-state-key="results"] [data-view-name="HeaderView"] {
    height: calc(var(--annex-search-header-height) + var(--annex-search-metaBar-height));
}

/**
 * Searching
 * 
 */
[data-view-name="RootView"][data-searching="1"] [data-view-name="HeaderView"] > div.hide {
    display: none;
}

[data-view-name="RootView"][data-searching="1"] [data-view-name="HeaderView"] > div.spinner {
    display: block;
}
