$mta-red: #df0000;
$mta-green: #008700;
$mta-blue: #0a5786;
$mta-orange: #de3700;
$mta-purple: #5a045a;
$mta-green-2: #4f8403;
$mta-yellow: #FCCC0A;
$mta-gray: #666;
$mta-brown: #573208;

$subways: (mta-red: $mta-red,
mta-green: $mta-green,
mta-blue: $mta-blue,
mta-orange: $mta-orange,
mta-purple: $mta-purple,
mta-green-2: $mta-green-2,
mta-yellow: $mta-yellow,
mta-gray: $mta-gray,
mta-brown: $mta-brown);

$icon-padding: 0.4em;

[class*="subway-icon"] {
    position: relative;
    font-size: .75em;
    z-index: 5;
    height: 1em;
    width: 1em;
    line-height: 1em;
    margin-left: $icon-padding/2;
    margin-right: $icon-padding/2;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;

    &::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: calc(100% + #{$icon-padding});
        height: calc(100% + #{$icon-padding});
        left: -($icon-padding / 2);
        top: -($icon-padding / 2);
        border-radius: 50%;
        background-color: red;
    }

    &.express {
        margin-left: $icon-padding/1.5;
        margin-right: $icon-padding/1.5;

        &::before {
            transform: rotate(45deg);
            border-radius: 0;
            width: calc(100% + #{$icon-padding / 4});
            height: calc(100% + #{$icon-padding / 4});
            left: -($icon-padding / 8);
            top: -($icon-padding / 8);
        }
    }
}

@each $value1,
$value2 in $subways {
    .#{$value1} {
        &::before {
            background-color: $value2;
        }

        @if $value2==$mta-yellow {
            color: #000;
        }

        @else {
            color: #fff;
        }
    }
}