$ratio-4x3: 1.33333333;

.eui-flag-icon {
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-flex !important;
    height: calc(0.83333333 * #{v(eui-base-spacing-l)});
    line-height: v(eui-base-line-height);
    min-width: v(eui-base-spacing-l);
    position: relative;
    width: v(eui-base-spacing-l);
    box-shadow: v(eui-base-shadow-1);

    &::before {
        content: "\00a0";
    }

    &-rounded,
    &--rounded {
        background-size: cover !important;
        border-radius: 50%;
        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
        min-width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
    }

    &-squared {
        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
        min-width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
    }

    &-rounded,
    &--rounded,
    &-squared {
        &.eui-flag-icon-1dot5x {
            height: calc(0.875 * #{v(eui-base-spacing-l)});
            width: calc(0.875 * #{v(eui-base-spacing-l)}) !important;
        }

        &.eui-flag-icon-2x {
            height: calc(1 * #{v(eui-base-spacing-l)});
            width: calc(1 * #{v(eui-base-spacing-l)}) !important;
        }

        &.eui-flag-icon-3x {
            height: calc(1.5 * #{v(eui-base-spacing-l)});
            width: calc(1.5 * #{v(eui-base-spacing-l)}) !important;
        }

        &.eui-flag-icon-4x {
            height: calc(2 * #{v(eui-base-spacing-l)});
            width: calc(2 * #{v(eui-base-spacing-l)}) !important;
        }

        &.eui-flag-icon-5x {
            height: calc(2.5 * #{v(eui-base-spacing-l)});
            width: calc(2.5 * #{v(eui-base-spacing-l)}) !important;
        }
    }

    &-1dot5x {
        height: calc(0.875 * #{v(eui-base-spacing-l)});
        width: calc(#{$ratio-4x3} * 0.875 * #{v(eui-base-spacing-l)}) !important;
    }

    &-2x {
        height: calc(1 * #{v(eui-base-spacing-l)});
        width: calc(#{$ratio-4x3} * 1 * #{v(eui-base-spacing-l)}) !important;
    }

    &-3x {
        height: calc(1.5 * #{v(eui-base-spacing-l)});
        width: calc(#{$ratio-4x3} * 1.5 * #{v(eui-base-spacing-l)}) !important;
    }

    &-4x {
        height: calc(2 * #{v(eui-base-spacing-l)});
        width: calc(#{$ratio-4x3} * 2 * #{v(eui-base-spacing-l)}) !important;
    }

    &-5x {
        height: calc(2.5 * #{v(eui-base-spacing-l)});
        width: calc(#{$ratio-4x3} * 2.5 * #{v(eui-base-spacing-l)}) !important;
    }
}
