// Tipo de display
$displays: "none", "block", "flex", "inline", "inline-block", "inline-flex";

@each $display in $displays {
  .d-#{$display} {
    display: unquote($display);
  }
}

// Cria um mapa de bordas com base nos tokens
$border-widths: create-map(
  $token-prefix: "surface-border-width-",
  $tokens-map: $tokens,
  $keys-with-prefix: false,
);

@include make-borders($border-widths, "surface-border-width-");

// Cria um mapa de arredondamentos com base nos tokens
$rounders: create-map(
  $token-prefix: "surface-rounder-",
  $tokens-map: $tokens,
  $keys-with-prefix: false,
);

@include make-rounders($rounders, "surface-rounder-");

.overflow {
  @each $overflow in "auto", "hidden", "visible" {
    &-#{$overflow} {
      overflow: #{$overflow};
    }
  }
}

// Cria um mapa de arredondamentos com base nos tokens
$opacities: create-map(
  $token-prefix: "surface-opacity-",
  $tokens-map: $tokens,
  $keys-with-prefix: false,
);

@include make-opacities($opacities, "surface-opacity-");

// Estilos para uma sobreposição semitransparente
.overlay-scrim {
  background-color: rgba(0, 0, 0, var(--scrim-opacity));
  inset: 0;
  position: absolute;
}

// Estilos para um texto sobreposto em gradiente
.overlay-text {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--elevation-overlay-legibility-opacity-start)),
    rgba(0, 0, 0, var(--elevation-overlay-legibility-opacity-end))
  );
  border-radius: initial;
  color: var(--theme-text-contrast-base);

  a {
    color: var(--theme-interactive-contrast);
  }
}

// Estilos com breakpoints
@each $breakpoint in "sm", "md", "lg", "xl" {
  @include media-breakpoint-up($breakpoint) {
    @each $display in $displays {
      .d-#{$breakpoint}-#{$display} {
        display: unquote($display);
      }
    }

    @include make-borders($border-widths, "surface-border-width-", $breakpoint);
    @include make-rounders($rounders, "surface-rounder-", $breakpoint);

    .overflow {
      @each $overflow in "auto", "hidden", "visible" {
        &-#{$breakpoint}-#{$overflow} {
          overflow: #{$overflow};
        }
      }
    }

    @include make-opacities($opacities, "surface-opacity-", $breakpoint);
  }
}