@font-face {
    font-family: 'Ecam';
    src: url('/Fonts/fbw-a380x/FBW-Display-EIS-A380.ttf');
}

@import "Common/definitions";

#main-container {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 2em;
}

#ecam-cp {
    width: 60em;
    height: 20em;

    background-color: gray;
}

#displays-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 2em;
}

.main-svg {
    width: 100%;
    background-color: $display-background;
    transform: translateY(10px);
}

.main-svg text {
    font-family: Ecam, monospace;
}

#safety-check {
    font-size: 24px;
    text-anchor: middle;

    fill: $display-green
}

.NoFill {
    fill: none;
}

.Green {
    stroke: $display-green;
}

text.Green,
tspan.Green,
.GreenFill {
    fill: $display-green;
}

.Green.Fill {
    stroke: none;
    fill: $display-green;
}

.Cyan {
    stroke: $display-cyan;
}

text.Cyan,
tspan.Cyan,
.Cyan.Fill {
    stroke: none;
    fill: $display-cyan;
}

.White {
    stroke: $display-white;
}

.WhiteFill {
    fill: $display-white;
}

text.White,
tspan.White,
.White.Fill {
    stroke: none;
    fill: $display-white;
    color: $display-white;
}

.LightGrey {
    stroke: $display-light-grey;
}

text.LightGrey,
tspan.LightGrey,
.LightGreyFill {
    fill: $display-light-grey;
}

.LightGreyBox {
    stroke: none;
    fill: $display-light-grey;
    opacity: 0.2
}

.Grey {
    stroke: $display-grey;
}

text.Grey,
tspan.Grey,
.GreyFill {
    fill: $display-grey;
}

.Grey.Fill {
    stroke: none;
    fill: $display-grey;
}

.DarkGrey {
    stroke: $display-dark-grey;
}

text.DarkGrey,
tspan.DarkGrey,
.DarkGreyFill {
    fill: $display-dark-grey;
}

.Amber {
    stroke: $display-amber;
}

text.Amber,
tspan.Amber,
.AmberFill {
    fill: $display-amber;
    color: $display-amber;
}

.Amber.Fill {
    stroke: none;
    fill: $display-amber;
}

.Magenta {
    stroke: $display-magenta;
}

.Red {
    stroke: $display-red;
}

text.Red,
tspan.Red,
.Red.Fill {
    stroke: none;
    fill: $display-red;
}

.Transparent {
    stroke: transparent;
}

text.Transparent,
tspan.Transparent,
.Transparent.Fill {
    stroke: none;
    fill: transparent;
}

.BackgroundFill {
    fill: $display-background !important;
}

.Background {
    stroke: $display-background;
}

.XSmall,
.F19 {
    font-size: 19px !important;
}

.F20 {
    font-size: 20px !important;
}

.Small,
.F21 {
    font-size: 21px !important;
}

.Medium,
.F22 {
    font-size: 22px !important;
}

.Large,
.F23 {
    font-size: 23px !important;
}

.VLarge,
.F24 {
    font-size: 24px !important;
}

.F25 {
    font-size: 25px !important;
}

.F26 {
    font-size: 26px !important;
}

.XLarge,
.F27 {
    font-size: 27px !important;
}

.F28 {
    font-size: 28px !important;
}

.F29 {
    font-size: 29px !important;
}

.Huge,
.F30 {
    font-size: 30px !important;
}

.F32 {
    font-size: 32px !important;
}

.F34 {
    font-size: 34px !important;
}

.F35 {
    font-size: 35px !important;
}

.F36 {
    font-size: 36px !important;
}

.LS1 {
    letter-spacing: 1px !important;
}

.LS2 {
    letter-spacing: 2px !important;
}

.LS-1 {
    letter-spacing: -1px !important;
}

.LS-8 {
    letter-spacing: -8px !important;
}

.WS-6 {
    word-spacing: -6px !important;
}

.WS-8 {
    word-spacing: -8px !important;
}

.WS-10 {
    word-spacing: -10px !important;
}

.TextOutline2 {
    stroke-width: 2px;
    // currentColor uses the color attribute, so we need to add that to the classes specifying the colors
    // Important is necessary as some color classes specify stroke:none
    stroke: currentColor !important;
}

.StartAlign {
    text-anchor: start;
}

.MiddleAlign {
    text-anchor: middle;
    dominant-baseline: middle;
}

.EndAlign,
.End {
    text-anchor: end !important;
}

.ecam-page-text {
    fill: $display-white;
    font-size: 21px;
}

.TextUnderline {
    text-decoration: underline;
}

.LineRound {
    stroke-linecap: round;
}

.LineJoinRound {
    stroke-linejoin: round;
}

.EcamPageMore {
    fill: $display-grey;
    font-size: 21px;
}

.ecam-thiccer-line {
    stroke: $display-white;
    stroke-width: 5;
}

.ecam-thicc-line {
    stroke: $display-white;
    stroke-width: 4;
}

.ecam-thin-line {
    stroke: $display-white;
    stroke-width: 2;
}

.body-line {
    stroke: $display-grey;
    stroke-width: 3;
}

.Line,
.SW2 {
    stroke-width: 2px;
}

.ThickLine,
.SW3 {
    stroke-width: 3px;
}

.SW4 {
    stroke-width: 4px !important;
}

.VThickLine,
.SW6 {
    stroke-width: 6px;
}

.ThickRedLine {
    stroke: $display-red !important;
    stroke-width: 8 !important;
    fill: $display-red;
}

.SW6RedLine {
    stroke: $display-red !important;
    stroke-width: 6 !important;
    fill: $display-red;
}

.ThickAmberLine {
    stroke: $display-amber !important;
    stroke-width: 8 !important;
    fill: $display-amber;
}

.FillPulse {
    animation: fill-pulse 1s step-end infinite;

    @keyframes fill-pulse {

        0%,
        100% {
            fill: $display-green;
        }

        50% {
            fill: hsl(120, 100%, 20%);
        }
    }
}

.LinePulse {
    animation: line-pulse 1s step-end infinite;

    @keyframes line-pulse {

        0%,
        100% {
            stroke: $display-green;
        }

        50% {
            stroke: hsl(120, 100%, 20%);
        }
    }
}

.Box {
    stroke: $display-light-grey;
    fill: none;
    stroke-width: 2.5px;
}

.StrokeRound {
    stroke-linecap: round;
}

.Mitre10 {
    stroke-miterlimit: 10;
}

.Show {
    display: block !important;
}

.Hide {
    display: none !important;
}

.EWDWarn {
    font-size: 26px;
    letter-spacing: 1.75px;
}
