/* --------------------------------------------------------------------------
   Environment marker (UI-ENV1, User Story #4411)
   One line per environment. A colour change is one edit here.
   _Layout.cshtml and Login.cshtml both load this file (Login does not load site.css).
   <html data-fw-env="uat|preview"> is set by OnePortal.Hosting.EnvironmentMarker.
   -------------------------------------------------------------------------- */
:root                        { --fw-env-colour: var(--fw-green); }
:root[data-fw-env="uat"]     { --fw-env-colour: #F57C00; --fw-env-text: #041E42; }
:root[data-fw-env="preview"] { --fw-env-colour: #D8291C; --fw-env-text: #FFFFFF; }

/* The label replaces the truck icon and has the same size and baseline as it. */
.fw-env-label {
    display: inline-block;
    position: relative;
    width: 1.35em;
    height: 1em;
    vertical-align: -0.125em;
    border-radius: 2px;
    background: var(--fw-env-colour);
    color: var(--fw-env-text);
}

/* On the sign-in page the label sits in the fa-2x context: the truck icon is 1.25em wide (40px at 2x) and the
   label takes its place as a centred block, so the 16px gap (mb-3) to "ONEPORTAL" is the same. */
.fw-env-label.fa-2x {
    display: block;
    width: 1.25em;
    margin-left: auto;
    margin-right: auto;
    vertical-align: baseline;
}

.fw-env-label > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .5em;
    font-weight: 700;
    line-height: 1;
}

/* The sign-in page divider under the brand block becomes the environment line on a UAT or Preview page.
   Prod and Development have no data-fw-env, so the divider keeps its default style. The margins stay my-3. */
:root[data-fw-env] .fw-env-rule { border-top: 4px solid var(--fw-env-colour); opacity: 1; }