/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace html "http://www.w3.org/1999/xhtml";

#aboutDialog {
    /* Set an explicit line-height to avoid discrepancies in 'auto' spacing
     across screens with different device DPI, which may cause font metrics
     to round differently. */
    line-height: 1.5;
}

#aboutDialogContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#leftBox {
    background-image: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x);
    background-repeat: no-repeat;
    background-size: 192px auto;
    background-position: center 40px;
    /* min-width and min-height create room for the logo; logo is 192px tall w/
     40px above it, this leaves 8px on the bottom at the minimum height */
    min-width: 210px;
    min-height: 240px;
    margin-top: 20px;
    margin-inline-start: 30px;
}

#rightBox {
    background-image: url("chrome://branding/content/about-wordmark.svg");
    background-repeat: no-repeat;
    background-size: 288px auto;
    /* padding-top creates room for the wordmark */
    padding-top: 38px;
    margin-top: 20px;
    /* We don't want this box to contribute arbitrarily to the intrinsic size of
   * the dialog, so set the width to a reasonable size, but let it flex to take
   * all available space. */
    width: 430px;
    flex: 1 auto;

    &:-moz-locale-dir(rtl) {
        background-position: 100% 0;
    }
}

#clientBox {
    flex: 1 0 auto;
    padding: 10px 0 15px;
}

#bottomBox {
    padding: 15px 10px 0;
    min-height: 52px;
}

#release {
    font-weight: bold;
    font-size: 125%;
    margin-top: 10px;
    margin-inline-start: 0;
}

#version {
    font-weight: bold;
    margin-inline-start: 0;
    user-select: text;
    -moz-user-focus: normal;
    cursor: text;

    &.update {
        font-weight: normal;
    }
}

#distribution,
#distributionId {
    display: none;
    margin-block: 0;
}

.text-blurb {
    margin-bottom: 10px;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

#updateInfo {
    display: grid;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

#updateDeck {
    align-items: center;

    description {
        margin: 0;
    }
}

#updateButton {
    margin-inline-start: 0;
}

.text-link {
    color: inherit !important;
    text-decoration: underline;

    description>& {
        margin: 0;
        padding: 0;
    }
}

#submit-feedback {
    margin-inline-start: 0.9em;
}

.bottom-link {
    text-align: center;
    margin: 0 40px;
}

#currentChannel {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#updateBox {
    line-height: normal;
    display: grid;
}

#updateIcon {
    display: none;
    align-self: center;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    -moz-context-properties: fill;
    fill: currentColor;
    width: 16px;
    height: 16px;
    margin-inline: 5px;

    &.noUpdatesFound {
        display: block;
        content: url("chrome://global/skin/icons/check.svg");
        fill: #30e60b;
    }

    &.apply {
        display: block;
        content: url("chrome://global/skin/icons/reload.svg");
    }

    &:is(.checkingForUpdates, .downloading, .applying, .restarting) {
        display: block;
        content: url("chrome://global/skin/icons/loading.svg");
    }
}