@{dotPrefix}@{component--prefix}-badge {
  display: inline-block;
  position: relative;

  // .lt-xl({
  //   left: @default--space;
  //   margin-bottom: @default--space / 4;
  // });

  // .gt-xl({
  //   margin-bottom: @default--space / 2;
  // });

  &.has-color {
    color: @white;
    padding-left: (@default--space / 2);
    padding-right: (@default--space / 2);

    // .lt-xl({
    //   left: @default--space / 2;
    // });

    // .gt-xl({
    //   left: -(@default--space / 2);
    // });

    // Adjust text color
    &[class*='white'],
    &[class*='yellow'] {
      color: @black;
    }

    // Adjust border
    &[class*='white'] {
      border: 1px solid @black;
    }
  }
}