.accent-border-top {
  // scss-lint:disable DeclarationOrder

  border-top: $accent-border-width solid;

  @include accent-border-variant($accent-border-color);
}

// Components that already have borders need special treatment.
//
// We use a box shadow here so the top border will always be solid and flush to
// the top. If we used a regular border you would get diagonal lines where the
// borders meet.
.card.accent-border-top {
  border-top: 0;
  position: relative;
  top: $accent-border-width;
  margin-bottom: rem($accent-border-width) + $line-height-base / 2;
}

.card-cells.accent-border-top {
  box-shadow: (
    inset $card-border-width (-$card-border-width) 0 0 $card-cells-border-color,
    inset (-$card-border-width) 0 0 0 $card-cells-border-color,
  );
}

@each $color in ('u-navy', 'u-electric-blue', 'u-teal', 'u-coral') {
  $border-class: str-slice($color, 3);
  .accent-border-#{$border-class} { @include accent-border-variant(ui-color($color)) }
}