// border
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
      .border-#{$color}-#{$shade} {
        border-color: var(--#{$color}-#{$shade}) !important;
      }
    }
}

// hover border
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
      .hover-border-#{$color}-#{$shade} {
        &:hover {
            border-color: var(--#{$color}-#{$shade}) !important;
        }
      }
    }
  }


  .hover-border-white {
    &:hover {
      border-color: hsl(var(--white)) !important;
    }
  }

// focus border
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
      .focus-border-#{$color}-#{$shade} {
        &:focus {
            border-color: var(--#{$color}-#{$shade}) !important;
        }
      }
    }
  }

.tw-border {
  &-dashed {
    border-style: dashed !important;
  }
}

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

.border {
  &-white-01 {
    border-color: hsl(var(--white)/0.12) !important;
  }
  &-white-02 {
    border-color: hsl(var(--white)/0.2) !important;
  }
  &-spring-green {
    border-color: hsl(var(--spring-green)) !important;
  }
  &-app-landing {
    border-color: hsl(var(--app-landing)) !important;
  }
  &-blue {
    border-color: var(--blue-color) !important;
  }
  &-dashed {
    border-style: dashed !important;
  }
}


