@use 'sass:math';
@import './../functions', './../variables';

@mixin dashed-border($color: get-map($theme, 'divider')) {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{$color}' stroke-width='1' stroke-dasharray='6%2c 8' stroke-dashoffset='2' stroke-linecap='round'/%3e%3c/svg%3e");
}

@mixin line-under-text(
  $color: 'light',
  $width: 60,
  $height: 4,
  $gap: 16,
  $border-radius: 2.5
) {
  position: relative;
  padding-bottom: px-to-rem($height + $gap);

  &::after {
    content: '';
    background: get-map($theme, 'text_line');
    width: px-to-rem($width);
    height: px-to-rem($height);
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -(px-to-rem(math.div($width, 2)));
    border-radius: px-to-rem($border-radius);

    @if $color == 'medium' {
      background: get-map($theme, 'text_line_medium');
    }

    @if $color == 'dark' {
      background: get-map($theme, 'text_line_dark');
    }
  }
}

@mixin full-width-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}
