@use '../base/variables' as v;
@use './bootstrap' as *;
@use 'sass:map';

@mixin text-weight($key, $map: v.$text-weights) {
  font-weight: map.get($map, $key);
}

@mixin bg-opacity($color, $opacity) {
  background-color: $color;
  /* The Fallback */
  background-color: rgba($color, $opacity);
}

@mixin poppins {
  font-family: Poppins;
}

@mixin header {
  @include text-weight(semiBold);
  @include poppins;
}

@mixin icon-container {
  // container with centered icon within it.
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

@mixin typography-legacy(
  $font-size: 12px,
  $line-height: 14px,
  $text-weight-key: medium,
  $color: v.$text-main,
  $font-family: 'Roboto'
) {
  font-family: $font-family;
  color: $color;
  font-size: $font-size;
  line-height: $line-height;
  @include text-weight($text-weight-key);
}

@mixin elevate() {
  box-shadow: 3px 3px 6px #00000005;
}

@mixin page-header() {
  @include typography-legacy(41px, 57px, semiBold, var(--text-main), 'Poppins');
}

@mixin card-header() {
  @include typography-legacy(20px, 28px, semiBold, var(--text-main), 'Poppins');
}

@mixin small-header() {
  @include typography-legacy(15px, 23px, medium, var(--text-main), 'Poppins');
}

@mixin modal-header() {
  @include typography-legacy(20px, 30px, semiBold, var(--text-main), 'Poppins');
}

@mixin regular-text($color: text-main) {
  @include typography-legacy(15px, 18px, regular, var(--#{$color}), 'Roboto');
}

@mixin list-text() {
  @include typography-legacy(15px, 18px, medium, var(--text-main), 'Roboto');
}

@mixin small-text($color: text-main) {
  @include typography-legacy(12px, 18px, medium);

  color: var(--#{$color});
}

@mixin label-text() {
  @include typography-legacy(12px, 14px, medium);

  color: var(--gray-light);
}

@mixin outer-label() {
  display: block;
  margin-bottom: 0.8rem;

  @include typography-legacy(12px, 14px, medium, var(--gray-light), 'Roboto');

  @include media-breakpoint-up(md) {
    margin-bottom: 1.2rem;
  }
}

@mixin apply-card {
  border-radius: 15px;
  box-shadow: var(--card-shadow);
  background-color: var(--white);
  box-sizing: border-box;
}
