:root {
    --firefox-font-size: 0.9rem;
    --firefox-font: "Roboto", sans-serif;

    --firefox-dark-gray: #202020;
    --firefox-light-gray: #525252;
    --firefox-lighter-gray: #828282;
}

.window.window-firefox {
    display: flex;
    flex-direction: column;
    font-family: var(--firefox-font);
    font-size: var(--firefox-font-size);
    background-color: var(--firefox-dark-gray);
}

.window.window-firefox .header {
    background-color: var(--firefox-dark-gray);
    color: white;
}

.window.window-firefox .header .header-top {
    display: flex;
    flex-direction: row;
}

.window.window-firefox .header .header-top .logo {
    height: 1.1rem;
    margin: 0.75rem;
}

.window.window-firefox .header .header-top .tabs {
    display: flex;
    border-left: 1px solid var(--firefox-light-gray);
    flex-grow: 1;
}

.window.window-firefox .header .header-top .tabs .tab {
    width: 14rem;
    background-color: var(--firefox-light-gray);
    border-radius: 0.25rem;
    margin: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.window.window-firefox .header .header-top .tabs .tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 93%;
    white-space: nowrap;
    font-size: 0.85rem;
}

.window.window-firefox .header .header-top .tabs .tab .close-button {
    width: 0.75rem;
}

.window.window-firefox .header .header-top .plus-button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;
    margin: 0.3rem;
}

.window.window-firefox .header .header-top .plus-button:hover {
    background-color: var(--firefox-light-gray);
}

.window.window-firefox .header .header-top .plus-button > img {
    width: 1rem;
}

.window.window-firefox .header .header-top .chevron {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

.window.window-firefox .header .header-bottom {
    display: flex;
    gap: 1%;
    justify-content: space-between;
    align-items: center;
    background-color: var(--firefox-light-gray);
    padding-left: 0.3rem;

    flex-wrap: nowrap;
}

.window.window-firefox .header .header-bottom .left,
.window.window-firefox .header .header-bottom .right {
    white-space: nowrap;
}

.window.window-firefox .header .header-bottom .url {
    background-color: var(--firefox-dark-gray);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    height: 1.9rem;
    margin: 0.3rem;
    padding: 0.3rem;
    border-radius: 0.25rem;
    flex-grow: 1;
    gap: 0.5rem;

    overflow: hidden;
}

.window.window-firefox .header .header-bottom .url img {
    width: 1rem;
}

.window.window-firefox .header .header-bottom .url .left {
    display: inline-flex;
    flex-direction: row;
    gap: 0.2rem;
    min-width: 2rem;
}

.window.window-firefox .header .header-bottom .url span  {
    flex-grow: 1;
    cursor: text;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    user-select: text;
    -webkit-user-select: text;
}

.window.window-firefox .header .header-bottom .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
}

.window.window-firefox .header .header-bottom .button > img {
    width: 1rem;
    height: 1rem;
}

.window.window-firefox .header .header-bottom .button:hover {
    background-color: var(--firefox-lighter-gray);
}

.window.window-firefox .content {
    flex-grow: 1;
}