BLiP Design System - Input

input.scss

@mixin size($size) {
  width: $size;
  height: $size;
}

.bds-icon {
  display: inline-flex;
  align-items: center;

  svg {
    fill: currentColor;
    width: 100%;
    min-width: 100%;
  }

  &__size {
    &--xxx-small {
      @include size(8px);
    }

    &--xx-small {
      @include size(12px);
    }

    &--x-small {
      @include size(16px);
    }

    &--small {
      @include size(20px);
    }

    &--medium {
      @include size(24px);
    }

    &--large {
      @include size(28px);
    }

    &--x-large {
      @include size(32px);
    }

    &--xx-large {
      @include size(36px);
    }

    &--xxx-large {
      @include size(40px);
    }
  }
}