$icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default;

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: $icon-dimensions;
  width: $icon-dimensions;

  // Sizes
  &.is-small {
    height: $icon-dimensions-small;
    width: $icon-dimensions-small;
  }

  &.is-medium {
    height: $icon-dimensions-medium;
    width: $icon-dimensions-medium;
  }

  &.is-large {
    height: $icon-dimensions-large;
    width: $icon-dimensions-large;
  }
}

.icon-text {
  align-items: flex-start;
  color: inherit;
  display: inline-flex;
  flex-wrap: wrap;
  line-height: $icon-dimensions;
  vertical-align: top;

  .icon {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      @include ltr {
        margin-right: $icon-text-spacing;
      }


      @include rtl {
        margin-left: $icon-text-spacing;
      }
    }

    &:not(:first-child) {
      @include ltr {
        margin-left: $icon-text-spacing;
      }


      @include rtl {
        margin-right: $icon-text-spacing;
      }
    }
  }
}

div.icon-text {
  display: flex;
}