// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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;
}

: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: center;
    height: 36px;
}

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

    &:hover {
        outline: 4px solid var(--icon--color);
        background-color: var(--icon--color);
    }
}

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

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

#scroll_lock:before {
    -webkit-mask-image: var(--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(--toolbar-edit-mode--read-only--content);
}

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

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

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

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

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

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

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

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

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

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

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

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

#scroll_lock.lock-scroll span:before {
    content: var(--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(--icon--color, #ccc);
}

.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:hover .button {
    position: relative;
    background-color: var(--icon--color);
    color: var(--plugin--background);
    opacity: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.hover-target:hover .button:before {
    background-color: var(--plugin--background);
}

// The label.
.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(--icon--color);
    width: 35px;
    text-align: center;
    border-radius: 0 0 3px 3px;
}
