/* CSS variables for text mode */
:root {
    --tab-border-thickness: 3px;
    --unselected-tab-grey: #505050;
    --icon-padding: 0;
    --tab-separator-font-size: small;
    --tab-separator-color: var(--unselected-tab-grey);
    --toplinks-icon-valign: baseline;
    --tab-padding-extra: 0;
    --main-top-offset: 132px;
}

/* Holding cell arrow sizing */
.symbol .icon-svg {
    width: 1.4em;
    height: 1.4em;
}

/* Holding cell lightbulb toggle */
.cell-toggle.inactive .bulb-fill {
    fill: var(--page-bg);
}

.cell-toggle.active .bulb-fill {
    fill: var(--rich-yellow);
}

.entity-tab {
    vertical-align: baseline;
}

/* Subtab padding - makes tabs taller in text mode */
.subtab {
    display: inline-block;
    padding: 0.2em 0;
}

/* Smaller button text in text mode */
a.button-link {
    font-size: 0.65em;
}

/* Exception for icon-only buttons (link/unlink) in Settings */
table.language-settings a.button-link {
    font-size: inherit;
    padding: 0px 12px;
}

/* Remove negative margins that squash button height in text mode */
body table.language-settings .button-link .icon-svg {
    margin-top: 0;
    margin-bottom: 0;
}

/*
  Tab labels (banner tabs and subtabs) come in both forms:
    <span class="label-text">LINKS</span><span
      class="label-icon"><span class="icon-svg" title="LINKS" ...>
  Text normally; icons (as in the icons language) on narrow screens,
  where the text labels don't fit. 730px matches the mobile layout
  breakpoint in checkeagle-ui.css.
*/
.label-icon {
    display: none;
}

@media (max-width: 730px) {
    :root {
        --tab-border-thickness: 0.3em;
        --unselected-tab-grey: var(--darkish-grey);
        --tab-separator-font-size: 1.5em;
        --tab-separator-color: var(--header-footer-bg);
    }

    .label-text {
        display: none;
    }

    .label-icon {
        display: inline;
    }

    .label-icon .icon-svg {
        padding: 0 0.4em;
    }
}