
/**
 * /src/css/header/field.css
 * 
 * @see     https://chatgpt.com/c/68a00a3c-65a4-832c-bbcd-2986ade8a6fe
 */
[data-view-name="FieldHeaderView"] {
    height: var(--annex-search-header-height);
    padding: calc((var(--annex-search-header-height) - 20px) / 2) 0 0 12px;
    border-bottom: 1px solid var(--annex-search-border-color);
}
[data-view-name="FieldHeaderView"] > div.label {
    height: 20px;
    width: 28px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    color: var(--annex-search-header-label-color);
    float: left;
    opacity: 0.50;
}
[data-view-name="FieldHeaderView"] > div.clear {
    display: none;
    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="FieldHeaderView"] > div.clear:hover {
    transform: scale(1.20) rotate(45deg);
    opacity: 0.50;
}
[data-view-name="FieldHeaderView"] > div.input {
    height: 20px;
    float: left;
    margin: 0 0 0 12px;
    width: calc(100% - 28px - 12px - var(--annex-search-header-hide-button-size) - 10px - 8px);
}
[data-view-name="FieldHeaderView"] > div.input > input {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: var(--annex-search-header-input-color);
    transition: 250ms color;
    font-size: 16px;
    transform: scale(0.88);
    transform-origin: 0 0;
}
[data-view-name="FieldHeaderView"] > div.input > input:focus {
    color: var(--annex-search-header-input-focus-color);
}
[data-view-name="FieldHeaderView"] > div.input > input::placeholder {
    color: var(--annex-search-header-input-placeholder-color);
}
[data-view-name="FieldHeaderView"] > div.input > input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/**
 * State
 * 
 */
:host([data-annex-search-query]:not([data-annex-search-query=""])) [data-searching="0"] [data-view-name="FieldHeaderView"] > div.clear {
    display: block;
}
