@import 'config/variables';
@import 'config/colors';
@import 'config/dimensions';

[class*='icon-subway'] {
  color: map-get($colors, 'color-white');
  font-size: 65%;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  @include font-smooth();
  padding: 1px;
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;
  display: inline-flex;

  width: $spacing-base;
  height: $spacing-base;
  min-width: $spacing-base;
  min-height: $spacing-base;

  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  &.bg-broadway {
    color: map-get($colors, 'color-black');
  }
}

.icon-subway-express {
  position: relative;
  z-index: 1;

  &[class*='bg-'] {
    background-color: transparent !important;
  }

  &:before, &:after {
    content: '';
    border: 15px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: -3px;
    z-index: -1;
  }

  &:before {
    top: -18px;
    border-bottom-color: inherit;
  }

  &:after {
    bottom: -18px;
    border-top-color: inherit;
  }
}