.legend {
  @include fontSize($font-size-md);
  position: relative;
  display: inline-block;
  margin-left: calc-rem(12);
  padding-left: calc-rem(24);
  vertical-align: top;

  &:first-of-type {
    margin-left: 0;
  }

  &:before {
    @extend %pseudos;

    border-radius: $border-radius-base;
    width: calc-rem(16);
    height: calc-rem(16);
    top: calc-rem(3);
    left: 0;
  }

  @include m(asap) {
    &:before {
      background-color: #eded0d;
    }
  }

  @include m(mobile) {
    &:before {
      background-color: #feb6e2;
    }
  }

  @include m(delivery) {
    &:before {
      background-color: #dd9750;
    }
  }

  @include m(walkin) {
    &:before {
      background-color: #87b5ca;
    }
  }

  @include m(concierge) {
    &:before {
      background-color: #2be879;
    }
  }

  @include m(in-fifteen) {
    &:before {
      background-color: #e64c4a;
    }
  }

  @include m(standard) {
    &:before {
      background-color: #d7d8d3;
    }
  }
}