@import "shared/mixins-and-vars";

/* General table styles */
/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

th,
td {
    text-align: left;
    text-align: start;
}

/** Property/Descriptor Definition Tables *************************************/

table.def {
    /* inherits .def box styling, see above */
    width: 100%;
    border-spacing: 0;
}

table.def td,
table.def th {
    padding: 0.5em;
    vertical-align: baseline;
    border-bottom: 1px solid #bbd7e9;
}

table.def > tbody > tr:last-child th,
table.def > tbody > tr:last-child td {
    border-bottom: 0;
}

table.def th {
    font-style: italic;
    font-weight: normal;
    padding-left: 1em;
    width: 3em;
}

/* For when values are extra-complex and need formatting for readability */
table td.pre {
    white-space: pre-wrap;
}

/* A footnote at the bottom of a def table */
table.def td.footnote {
    padding-top: 0.6em;
}
table.def td.footnote::before {
    content: " ";
    display: block;
    height: 0.6em;
    width: 4em;
    border-top: thin solid;
}

/** Data tables (and properly marked-up index tables) *************************/
/*
     <table class="data"> highlights structural relationships in a table
     when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

     Use class="complex data" for particularly complicated tables --
     (This will draw more lines: busier, but clearer.)

     Use class="long" on table cells with paragraph-like contents
     (This will adjust text alignment accordingly.)
     Alternately use class="longlastcol" on tables, to have the last column assume "long".
*/

table {
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

table.data,
table.index {
    margin: 1em auto;
    border-collapse: collapse;
    border: hidden;
    width: 100%;
}
table.data caption,
table.index caption {
    max-width: 50em;
    margin: 0 auto 1em;
}

table.data td,
table.data th,
table.index td,
table.index th {
    padding: 0.5em 1em;
    border-width: 1px;
    border-color: silver;
    border-top-style: solid;
}

table.data thead td:empty {
    padding: 0;
    border: 0;
}

table.data thead,
table.index thead,
table.data tbody,
table.index tbody {
    border-bottom: 2px solid;
}

table.data colgroup,
table.index colgroup {
    border-left: 2px solid;
}

table.data tbody th:first-child,
table.index tbody th:first-child {
    border-right: 2px solid;
    border-top: 1px solid silver;
    padding-right: 1em;
}

table.data th[colspan],
table.data td[colspan] {
    text-align: center;
}

table.complex.data th,
table.complex.data td {
    border: 1px solid silver;
    text-align: center;
}

table.data.longlastcol td:last-child,
table.data td.long {
    vertical-align: baseline;
    text-align: left;
}

table.data img {
    vertical-align: middle;
}

/* specific grid css */

.annotate {
    font-style: italic;
    color: #366ed4;
}

.hidden {
    display: none !important;
}

[role="button"] {
    cursor: pointer;
}

[aria-sort="ascending"] {
    position: relative;
}

[aria-sort="ascending"]::after {
    content: " ";
    border-bottom: 0.4em solid black;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    position: absolute;
    right: 1em;
    top: 0.8em;
}

[aria-sort="descending"] {
    position: relative;
}

[aria-sort="descending"]::after {
    content: " ";
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-top: 0.4em solid black;
    position: absolute;
    right: 1em;
    top: 0.8em;
}

.edit-text-button {
    color: #360;
    display: block;
    position: relative;
}

.edit-text-button::after {
    background-image: data-uri("../imgs/pencil-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 44px;
    content: " ";
    height: 17px;
    opacity: 0.6;
    position: absolute;
    right: -24px;
    top: 0px;
    width: 20px;
}

.edit-text-button:hover,
.edit-text-button:focus {
    color: black;
}

.edit-text-button:hover::after,
.edit-text-button:focus::after {
    opacity: 1;
}

[role="gridcell"]:focus,
[role="gridcell"] *:focus,
[role="grid"] [tabindex="0"]:focus {
    outline: @focus-color;
    outline-style: dotted;
    outline-width: 3px;
}

#arrow-keys-indicator {
    bottom: 10px;
    left: 0;
    position: fixed;
    height: 65px;
    width: 85px;
    background: data-uri("../imgs/black_keys.png") no-repeat;
    background-size: contain;
}

@media screen and (max-width: 1000px) {
    #arrow-keys-indicator {
        display: none;
    }
}

/* Menu button */
button {
    cursor: pointer;
    font-size: 1.1rem;
}

.menu-wrapper {
    position: relative;
}

ul[role="menu"] {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 1;
}

ul[role="menu"] li {
    list-style: none;
}

[role="menu"] {
    padding: 0;
    width: 8em;
    border: thin solid black;
    background-color: #eeeeee;
}
[role="menuitem"] {
    padding: 0.25em;
}

[role="menuitem"]:focus,
[role="menuitem"]:hover {
    background-color: #ffffff;
}