@use './prefix';
@use './variables';
@use './mixins/hairline' as *;

[class*='#{prefix.$component-prefix}hairline'] {
  &::after {
    @include hairline;
  }
}

.#{prefix.$component-prefix}hairline {
  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--top::after {
    border-top-width: variables.$border-width-base;
  }

  &--left::after {
    border-left-width: variables.$border-width-base;
  }

  &--right::after {
    border-right-width: variables.$border-width-base;
  }

  &--bottom::after {
    border-bottom-width: variables.$border-width-base;
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: variables.$border-width-base 0;
    }
  }

  &--surround::after {
    border-width: variables.$border-width-base;
  }
}