body
{
    /* font-family: message-box from the legacy VTR add-on, rest default in Firefox */
    font-family: sans-serif,serif,helvetica;
    height: 100vh;
    display: flex;
    flex-flow: column;
    /*overflow-y: hidden;*/
    user-select: none;
}

#tabbrowser-tabs {
    flex: 1 1 auto;
    overflow-y: auto;
    /* margin-right: 2px; */
}

#tabbrowser-tabs-pinned {
    flex: 0 1 auto;
}

#TabsToolbar {
    flex: 0 1 24px;
    display: flex;
    align-items: center;
    margin-top: 1px;
}

#TabsToolbar span:first-child {
    margin-left: 2px;
}

#TabsToolbar span {
    padding-left: 6px;
    padding-right: 6px;
}

#TabsToolbar span:hover {
    background-color: hsla(240,5%,5%,.1);
}

.tab-buttons {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.tab-close-button {
    height: 20px;
    width: 24px;
    display: inline-block;
    background-image: url("../../data/template/basic/icons/light/close-regular.png");
    background-size: 20px 20px; /* contain ? */
    background-position: center center;
    background-repeat: no-repeat;
}

.tab-sound-button {
    display: inline-block;
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    /* mask-repeat: no-repeat;
    mask-position: center center; */
}

.tab-sound-button-playing {
    height: 18px;
    width: 24px;
    /* background-color: currentColor; */
    background-image: url("../../data/chrome/icon/tab-audio-playing.svg");
}

.tab-sound-button-muted {
    height: 18px;
    width: 24px;
    /* background-color: inherit; */
    background-image: url("../../data/chrome/icon/tab-audio-muted.svg");
}

.tab-icon-sound {
	filter: drop-shadow(1px 1px 1px currentColor);
}

/* Ensure the tab favicon doesn't stretch. */
.tab-icon-image {
    max-width: 20px;
    max-height: 22px;
}

/* Placeholder: .tab-icon-image-light .tab-icon-image-dark */

/* FIXME: This works natively in FF but not here?
.tab-icon-image[src*="data/chrome/icon/"] {
    -moz-context-properties: fill !important;
    fill: currentColor !important;
}*/


/* Don't show close buttons for pinned tabs */
.tabbrowser-tab[pinned] .tab-close-button,
.tabbrowser-tab[pinned] .tab-close-button:hover,
.tabbrowser-tab[pinned] .tab-close-button:active {
    display: none;
}

.tabbrowser-tab {
	min-height: 20px;
	height: 20px;
	max-height: 40px;
	border-bottom: 1px solid #5E6972;

    display: grid;
    grid-gap: 4px;
    /* margin: 0.5rem; */
    align-items: center;
}

.tab-label {
    white-space: nowrap;
    vertical-align: middle;
    text-overflow: clip;
    overflow: hidden;
}

body[data-tab-buttons-position="left"] .tabbrowser-tab                  { grid-template-columns: min-content 22px auto; }
body[data-tab-buttons-position="left"] .tabbrowser-tab .tab-buttons     { order: 1; padding-left: 3px; }
body[data-tab-buttons-position="left"] .tabbrowser-tab .tab-icon        { order: 2; }
body[data-tab-buttons-position="left"] .tabbrowser-tab .tab-label       { order: 3; }
body[data-tab-buttons-position="left"] .tabbrowser-tab .tab-buttons .tab-close-button   { order: -1; }

body[data-tab-buttons-position="right"] .tabbrowser-tab                 { grid-template-columns: 22px auto min-content; }
body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-icon       { order: 1; }
body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-label      { order: 2; }
body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-buttons    { order: 3; padding-right: 3px; }
body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-buttons .tab-close-button   { order: 999; }

.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button { display: none; }

/* FIXME: useful? */
/* Taken from Firefox's original tabbrowser css */
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .tab-icon-image {
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
  }
}
