/**
 * Border utilities
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;

@each $breakpoint in map.keys(map.get($theme, 'breakpoint')) {
  @include breakpoints.up($breakpoint) {
    $infix: breakpoints.infix($breakpoint, map.get($theme, 'breakpoint'));

    // Full border
    .ecl-u-border#{$infix}-all {
      border: 1px solid map.get($theme, 'color', 'black') !important;
    }

    .ecl-u-border#{$infix}-bottom {
      border-bottom: 1px solid map.get($theme, 'color', 'black') !important;
    }

    .ecl-u-border#{$infix}-left {
      border-left: 1px solid map.get($theme, 'color', 'black') !important;
    }

    .ecl-u-border#{$infix}-top {
      border-top: 1px solid map.get($theme, 'color', 'black') !important;
    }

    .ecl-u-border#{$infix}-right {
      border-right: 1px solid map.get($theme, 'color', 'black') !important;
    }

    // Border color
    @each $key, $value in map.get($theme, 'color') {
      @if $key == 'white' or $key == 'black' {
        .ecl-u-border-color#{$infix}-#{$key} {
          border-color: map.get($theme, 'color', $key) !important;
        }
      } @else {
        .ecl-u-border-color#{$infix}-#{$key} {
          border-color: var(--ecl-color-#{$key}) !important;
        }
      }
    }

    .ecl-u-border-color-transparent {
      border-color: transparent !important;
    }

    // Border width
    .ecl-u-border-width#{$infix}-0 {
      border-width: 0 !important;
    }

    .ecl-u-border-width#{$infix}-1 {
      border-width: 0.0625rem !important; // 1px
    }

    .ecl-u-border-width#{$infix}-2 {
      border-width: 0.125rem !important; // 2px
    }

    .ecl-u-border-width#{$infix}-4 {
      border-width: 0.25rem !important; // 4px
    }

    .ecl-u-border-width#{$infix}-8 {
      border-width: 0.5rem !important; // 8px
    }

    // Border style
    .ecl-u-border-style#{$infix}-solid {
      border-style: solid !important;
    }

    .ecl-u-border-style#{$infix}-dashed {
      border-style: dashed !important;
    }

    .ecl-u-border-style#{$infix}-dotted {
      border-style: dotted !important;
    }

    // Border radius
    .ecl-u-border-radius#{$infix}-0 {
      border-radius: 0 !important;
    }

    .ecl-u-border-radius#{$infix}-1 {
      border-radius: 0.0625rem !important; // 1px
    }

    .ecl-u-border-radius#{$infix}-2 {
      border-radius: 0.125rem !important; // 2px
    }

    .ecl-u-border-radius#{$infix}-4 {
      border-radius: 0.25rem !important; // 4px
    }

    .ecl-u-border-radius#{$infix}-8 {
      border-radius: 0.5rem !important; // 8px
    }
  }
}
