// Core border utilities
// stylelint-disable primer/borders

/* Add a gray border to the left and right */
.border-x {
  // stylelint-disable-next-line primer/colors
  border-right: $border-rem !important;
  // stylelint-disable-next-line primer/colors
  border-left: $border-rem !important;
}

/* Add a gray border to the top and bottom */
.border-y {
  // stylelint-disable-next-line primer/colors
  border-top: $border-rem !important;
  // stylelint-disable-next-line primer/colors
  border-bottom: $border-rem !important;
}

/* Responsive gray borders */
@each $breakpoint, $variant in $responsive-variants {
  @include breakpoint($breakpoint) {
    /* Add a gray border on all sides at/above this breakpoint */
    // stylelint-disable-next-line primer/colors
    .border#{$variant}        { border: $border-rem !important; }
    .border#{$variant}-0      { border: 0 !important; }

    // stylelint-disable-next-line primer/colors
    .border#{$variant}-top    { border-top: $border-rem !important; }
    // stylelint-disable-next-line primer/colors
    .border#{$variant}-right  { border-right: $border-rem !important; }
    // stylelint-disable-next-line primer/colors
    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
    // stylelint-disable-next-line primer/colors
    .border#{$variant}-left   { border-left: $border-rem !important; }

    .border#{$variant}-top-0    { border-top: 0 !important; }
    .border#{$variant}-right-0  { border-right: 0 !important; }
    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
    .border#{$variant}-left-0   { border-left: 0 !important; }

    // Rounded corners
    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
    .rounded#{$variant}-0 { border-radius: 0 !important; }
    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }

    @each $edge, $corners in $edges {
      .rounded#{$variant}-#{$edge}-0 {
        @each $corner in $corners {
          border-#{$corner}-radius: 0 !important;
        }
      }

      .rounded#{$variant}-#{$edge}-1 {
        @each $corner in $corners {
          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
        }
      }

      .rounded#{$variant}-#{$edge}-2 {
        @each $corner in $corners {
          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
        }
      }

      .rounded#{$variant}-#{$edge}-3 {
        @each $corner in $corners {
          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
        }
      }
    }
  }
}

/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: var(--borderRadius-full, 50%) !important; }

/* Change the border style to dashed, in conjunction with another utility */
.border-dashed {
  border-style: dashed !important;
}