/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
 * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
 * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
 * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
 * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
 * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
 * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
 * ┃ This file is part of the Perspective library, distributed under the terms ┃
 * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 */

:host {
    position: relative;
    display: block;
    height: 100%;
}

:host #container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

:host #toolbar {
    display: flex;
    align-items: stretch;
    height: 100%;
}

:host #toolbar .hover-target {
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    &:hover {
        box-shadow:
            -4px 0 0 var(--psp--color),
            4px 0 0 var(--psp--color);
        background-color: var(--psp--color);
    }
}

:host #slot-container {
    flex: 1;
    position: relative;
}

#scroll_lock.lock-scroll:before {
    -webkit-mask-image: var(--psp-toolbar-scroll-lock-active--content);
}

#scroll_lock:before {
    -webkit-mask-image: var(--psp-toolbar-scroll-lock--content);
}

#select_mode:before {
    content: "highlight_alt";
}

#edit_mode:before {
    -webkit-mask-image: "";
}

#edit_mode[data-edit-mode="READ_ONLY"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
}

#edit_mode[data-edit-mode="EDIT"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-edit--content);
}

:host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
}

#edit_mode[data-edit-mode="SELECT_ROW"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row--content);
}

#edit_mode[data-edit-mode="SELECT_COLUMN"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-column--content);
}

#edit_mode[data-edit-mode="SELECT_REGION"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
}

#edit_mode[data-edit-mode="SELECT_ROW_TREE"]:before {
    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row-tree--content);
}

/* #edit_mode span:before { */
/*     content: var(--edit-mode-toggle--content, "N/A"); */
/* } */

#edit_mode[data-edit-mode="READ_ONLY"] span:before {
    content: var(--psp-label--edit-mode-read-only--content, "Read Only");
}

#edit_mode[data-edit-mode="EDIT"] span:before {
    content: var(--psp-label--edit-mode-edit--content, "Editable");
}

#edit_mode[data-edit-mode="SELECT_ROW"] span:before {
    content: var(--psp-label--edit-mode-select-row--content, "Row Select");
}

#edit_mode[data-edit-mode="SELECT_COLUMN"] span:before {
    content: var(
        --psp-label--edit-mode-select-column--content,
        "Column Select"
    );
}

#edit_mode[data-edit-mode="SELECT_REGION"] span:before {
    content: var(
        --psp-label--edit-mode-select-region--content,
        "Region Select"
    );
}

#edit_mode[data-edit-mode="SELECT_ROW_TREE"] span:before {
    content: var(
        --psp-label--edit-mode-select-row-tree--content,
        "Tree Select"
    );
}

#scroll_lock span:before {
    content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
}

#scroll_lock.lock-scroll span:before {
    content: var(--psp-label--scroll-lock-alt-toggle--content, "Align Scroll");
}

/* The icon. */
.button:before {
    width: 21px;
    height: 21px;
    content: "";
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--psp--color);
}

.button.editable:before,
.button.lock-scroll:before {
    color: inherit;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    border: 1px solid transparent;
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--label--font-size, 0.75em);
    height: 22px;
    user-select: none;
    white-space: nowrap;
    width: 37px;
}

.button > span {
    display: none;
    margin: 0;
    padding: 0;
}

.hover-target:focus-within .button,
.hover-target:hover .button {
    position: relative;
    background-color: var(--psp--color);
    color: var(--psp--background-color);
    opacity: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.hover-target:focus-within .button:before,
.hover-target:hover .button:before {
    background-color: var(--psp--background-color);
}

/* The label. */
.hover-target:focus-within .button > span,
.hover-target:hover .button > span {
    display: block;
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    translate: -50%;
    margin: 0;
    padding: 5px;
    height: auto;
    white-space: pre-wrap;
    line-height: 1;
    font-size: 9px;
    background-color: var(--psp--color);
    width: 35px;
    text-align: center;
    border-radius: 0 0 3px 3px;
}