@use './variables' as *;

// Background and text colors helpers

$bg-colors: (
  'white': $bg-white,
  'teal': $bg-teal,
  'dark-blue': $bg-dark-blue,
  'green': $bg-green,
  'yellow': $bg-yellow,
  'blue': $bg-blue,
  'red': $bg-red,
  'gray': $bg-gray,
  'gray-50': $bg-gray-50,
);
@each $name, $pair in $bg-colors {
  .bg-#{$name} {
    background-color: $pair !important;
  }
}

$text-colors: (
  'yellow': $text-yellow,
  'white': $text-white,
  'teal': $text-teal,
  'red': $text-red,
  'green': $text-green,
  'gray-light': $text-gray-light,
  'gray': $text-gray,
  'blue': $text-blue,
  'dark-blue': $text-dark-blue,
  'secondary': $sb-color-text-secondary,
);
@each $name, $pair in $text-colors {
  .text-#{$name} {
    color: $pair !important;
  }
}

// Positioning helpers
@each $name, $value in $sizes {
  .sb-m-#{$name} {
    margin: $value !important;
  }

  .sb-mt-#{$name} {
    margin-top: $value !important;
  }

  .sb-mr-#{$name} {
    margin-right: $value !important;
  }

  .sb-mb-#{$name} {
    margin-bottom: $value !important;
  }

  .sb-ml-#{$name} {
    margin-left: $value !important;
  }

  .sb-mx-#{$name} {
    margin-left: $value !important;
    margin-right: $value !important;
  }

  .sb-my-#{$name} {
    margin-bottom: $value !important;
    margin-top: $value !important;
  }

  .sb-p-#{$name} {
    padding: $value !important;
  }

  .sb-pt-#{$name} {
    padding-top: $value !important;
  }

  .sb-pr-#{$name} {
    padding-right: $value !important;
  }

  .sb-pb-#{$name} {
    padding-bottom: $value !important;
  }

  .sb-pl-#{$name} {
    padding-left: $value !important;
  }

  .sb-px-#{$name} {
    padding-left: $value !important;
    padding-right: $value !important;
  }

  .sb-py-#{$name} {
    padding-bottom: $value !important;
    padding-top: $value !important;
  }
}

// Typography helpers

// DEPRECATED. Prefer to use the semantic classes
@each $name, $pair in $font-size {
  .font-#{$name} {
    font-size: $pair !important;
  }
}

@each $name, $pair in $semantic-font-size {
  .text-#{$name} {
    font-size: $pair !important;
  }
}

@each $name, $pair in $font-weight {
  .font-#{$name} {
    font-weight: $pair !important;
  }
}

@each $name, $pair in $text-transforms {
  .text-#{$name} {
    text-transform: $pair !important;
  }
}

// Display helpers
.flex {
  display: flex;
}

.grid {
  display: grid;
}

// make an element visible only for screen readers
.screen-reader-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap; // added line to prevent text wrapping
  border: 0;
  clip-path: inset(50%);
}