

.striped-bg {
    --stripe-a: #000;
    --stripe-b: #fff;
    --stripe-size: 10px;
    --stripe-dir: 315deg;
    background:
        repeating-linear-gradient(var(--stripe-dir),
            var(--stripe-a),
            var(--stripe-a) var(--stripe-size),
            var(--stripe-b) var(--stripe-size),
            var(--stripe-b) calc(var(--stripe-size) * 2));
}

.comp-table-root {
    position: relative;
    margin-top: 20px;
}

.comp-table-dummy {
    display: flex;
    flex-flow: column;
    align-items: end;
    justify-content: end;
    padding-bottom: 5px;
    margin-right: var(--desc-gap);
}

.comp-header-fix {
    --dummy-w: 0px;
    --head-w: 10px;

    width: fit-content;
    position: fixed;
    transition: opacity .1s ease-out;
    background-color: #eee;
    /* background-color: #875050; */

    z-index: 10;
    opacity: 0;
    visibility: hidden;
    top: 0;
}

.comp-header-fix .comp-table-dummy {
    width: var(--dummy-w);
}

.comp-header-fix .comp-table-name {
    width: var(--head-w);
}

.comp-table {
    --row-gap: 14px;
    --desc-gap: 20px;
    --col-width: 57px;
    --cell-size: 35px;

    --row-border: 1px;
    --row-border-style: none;
    --row-border-color: #0000001f;
    --row-border-color-hover: #00000029;

    --cell-bg: #ececec;
    --cell-bg-alt: #e1e1e1;
    --cell-hover-bg: #a9cee4;
    --cell-hover-bg-alt: #9bc2d9;
    --cell-hover-row-bg: #c8c8c8;
    --cell-hover-row-bg-alt: #c8c8c8;
    --row-gap-real: calc(var(--row-gap) / 2);

    --cell-support-partial-bg: #fdba64;
    --cell-support-partial-fg: #533f26;
    --cell-support-full-bg: #b5ef6e;
    --cell-support-full-fg: #638429;
    --cell-support-none-bg: #fd8064;
    --cell-support-none-fg: #7b3723;

    position: relative;
    width: fit-content;
    display: grid;
    grid-template-columns: fit-content(350px) repeat(calc(var(--cols) - 1), var(--col-width));
}

.comp-header-fix-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

.comp-table .comp-table-dummy {
    grid-row: 1 / span 2;
}

.comp-table-name {
    padding-bottom: var(--row-gap);
    padding-top: var(--row-gap);
    border-radius: 4px;

    display: flex;
    row-gap: .8em;
    flex-flow: column;
    justify-content: end;
    align-items: center;
    cursor: pointer;
}

.comp-table-name-selected {
    background-color: #b9d992;
}

.comp-table-name-selected-inv {
    background-color: #d6794b;
}

.comp-table-name-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
}

.comp-table-name .i-support-indicator {
    --size: 10px;
    --color: #0000;
    width: var(--size);
    height: var(--size);
    background-color: var(--color);
    border-radius: 100%;
}

.comp-table-desc {
    --padding-left: 10px;

    padding-bottom: var(--row-gap-real);
    padding-top: var(--row-gap-real);
    padding-right: var(--desc-gap);
    padding-left: var(--padding-left);
    border-top: var(--row-border) var(--row-border-style) var(--row-border-color);
    min-height: var(--cell-size);

    display: flex;
    row-gap: 3px;
    flex-flow: column;
    justify-content: center;

    background-color: var(--cell-bg);
}

.comp-table-desc.comp-table-interface {
    padding-left: calc(var(--padding-left) + 30px);
}

.comp-table-desc-name {
    word-break: break-word;
    color: #404040;
    font-weight: 800;
}

.comp-table-desc-name a {
    text-decoration: none;
    color: inherit;
}

.comp-table-desc-name a:hover {
    color: #2b5b80;
}

.comp-table-desc-name-interface {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
}

.comp-table-desc-id {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #444;
}

.comp-table-interface-deprecation {
    color: #b74646;
}

.comp-table-interface-deprecation b {
    font-weight: 600;
}

.comp-table-tag-box {
    --tag-pad-v: 2px;

    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.comp-table-tag-box.m-outer {
    margin: 5px 0;
}

.comp-table-tag {
    --tag-bg: #eee;
    --tag-fg: #000;

    cursor: default;
    height: fit-content;
    padding: var(--tag-pad-v) 10px;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--tag-fg);
    background-color: var(--tag-bg);
    outline: 1px solid var(--tag-fg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-table-tag-deprecated {
    --stripe-a: #0000;
    --stripe-b: rgb(247, 211, 200);
    --stripe-size: 5px;
}

.comp-table-db {
    --size: 24px;
    --icon-size: 16px;
    --border-color-hover: #444;
    --border-color-active: #8f8f8f;
    --border-size-active: 2px;

    display: flex;
    align-items: center;
    justify-content: center;

    --gap-size: calc((var(--size) - var(--icon-size)) / 2);
    padding: 0 var(--gap-size);
    height: var(--size);
    column-gap: var(--gap-size);

    background-color: #0000;
    border-radius: 5px;
    outline: 1px solid #0000002e;
    color: #606060;
    font-weight: 500;

    cursor: pointer;
    text-align: center;
    user-select: none;
}

.comp-table-db .material-symbols-outlined {
    font-size: var(--icon-size);
    font-variation-settings: 'opsz' 20, 'wght' 400;
}

.comp-table-db:hover {
    outline: 1px solid var(--border-color-hover);
}

.comp-table-db-active {
    outline: var(--border-size-active) solid var(--border-color-active);
}

.comp-table-db-active:hover {
    outline: var(--border-size-active) solid var(--border-color-hover);
}

.comp-table-cell {
    padding-top: var(--row-gap-real);
    border-top: var(--row-border) var(--row-border-style) var(--row-border-color);
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 0;

    background-color: var(--cell-bg);
}

.comp-table-cell-no-border {
    border: none;
}

.comp-table-cell-prc {
    background: none;
}

.comp-table-cell-prc-content {
    font-weight: 500;
    margin-bottom: 5px;
    padding: 3px;
    position: relative;
}

.comp-table-cell-prc-bg {
    background-color: #5cc81f;
    opacity: var(--prc);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.comp-table-cell-content {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    cursor: default;
    border-radius: 4px;

    margin-bottom: var(--row-gap-real);
}

.comp-table-cell-interface-content {
    border-radius: 9999px;
    --cell-size: 30px;
}

.comp-table-cell-support-partial {
    background-color: var(--cell-support-partial-bg);
    color: var(--cell-support-partial-fg);
}

.comp-table-cell-support-full {
    background-color: var(--cell-support-full-bg);
    color: var(--cell-support-full-fg)
}

.comp-table-cell-support-none {
    background-color: var(--cell-support-none-bg);
    color: var(--cell-support-none-fg);
}

.comp-table-row-hover {
    background-color: var(--cell-hover-row-bg);
}

.comp-table-cell-hover {
    background-color: var(--cell-hover-bg);
    --row-border-color: var(--row-border-color-hover);
}

.comp-table-even-odd {
    --cell-bg: var(--cell-bg-alt);
}

.comp-table-row-hover.comp-table-even-odd {
    --cell-hover-row-bg: var(--cell-hover-row-bg-alt);
}

.comp-table-cell-hover.comp-table-even-odd {
    --cell-hover-bg: var(--cell-hover-bg-alt);
}

.comp-table-interface {
    --row-border-style: solid;
}

.comp-table-fulldesc {
    grid-column: 1 / span var(--cols);
    justify-content: stretch;
}

.comp-table-fulldesc .i-wrapper {
    padding: 20px;
    column-gap: 25px;
    max-height: 400px;
    column-width: 500px;
    column-fill: auto;

    width: 100%;
    overflow-x: scroll;
}

.comp-table-fulldesc .i-text {
    white-space: pre-line;
    margin-top: 10px;
}

.comp-table-fulldesc .i-text.m-sec {
    font-size: .7em;
    color: #474747;
}

.comp-table-fulldesc .i-heading {
    margin: 0;
    margin-top: 20px;

    break-after: avoid-column;
    /* not supported in FF ?? */
}

.comp-table-fulldesc h1 {
    font-size: 20px;
    font-weight: 600;
}

.comp-table-fulldesc h1.m-sub {
    font-size: 15px;
    font-weight: 400;
    margin-top: 5px;
    color: #313131;
}

.comp-table-fulldesc h2 {
    font-size: 17px;
    font-weight: 500;
}

.comp-table-fulldesc .m-mono {
    font-family: var(--font-mono);
}

.comp-table-fulldesc :is(.i-text, h1, h2):first-child {
    margin-top: 0;
}

.comp-icon {
    --size: 20px;

    width: var(--size);
    height: var(--size);
}

.comp-table-filter.m-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;

    /* backdrop-filter: blur(2px); */
    /* background-color: #00000038; */
}

.comp-table-filter.m-wnd {
    position: absolute;
    background-color: #fff;
    z-index: 2;

    top: 100%;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #00000073;
    box-shadow: 2px 2px 2px 0 #0000004d;

    width: max-content;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
