/// ----------------------------------------------------------------------

/// Text

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'breakpoints';
@use 'typography';
@use 'spacing';
@use 'colours';

/// -------------------
/// Text config
/// -------------------

$margin-bottom: spacing.$sm !default;

/// -------------------
/// Text selectors
/// -------------------

.text {
  margin-top: 0;
  margin-bottom: $margin-bottom;

  @each $variant-name, $variant-prop in typography.$all {
    &--#{$variant-name} {
      @include lib.mixin-apply-props(map-get(typography.$all, $variant-name));
    }
  }

  &--inverse {
    color: white;
  }

  &--muted {
    color: rgba(colours.$ui-six, 0.5)
  }

  &--medium {
    font-weight: typography.$font-medium;
  }

  &--bold {
    font-weight: typography.$font-bold;
  }

  &--italics {
    font-style: italic;
  }

  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }

  &--screen-reader {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  &:only-child,
  &:last-child {
    margin-bottom: 0;
  }
}
