//
// Component: Ribbon
//
// A diagonal banner pinned to the top corner of a positioned parent. `.card` is
// already `position: relative`; anything else needs `.position-relative`.
//
// The wrapper is a square that clips the band. The band is NOT centred on that
// square — a corner ribbon has to hug the corner, and the square's centre is
// the point furthest from it, which would leave the corner bare. Instead the
// band's centre sits on the corner's bisector at ~46% of the square's side,
// which is the proportion v3 used and the one that leaves room for the label.
// rtlcss mirrors the offsets and the rotation, so no direction-specific rules
// are needed here.
//

.ribbon-wrapper {
  // Width is the chord across the corner at the band's inner edge, so the band
  // reaches both edges of the square and its ends are cut flush. Derived here
  // rather than with calc() so a theme only ever overrides the size.
  --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size};
  --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size * 1.3};
  --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size};

  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: var(--#{$lte-prefix}ribbon-size);
  height: var(--#{$lte-prefix}ribbon-size);
  overflow: hidden;
  // Inheriting the parent's corner radius makes the clip follow a rounded
  // card instead of cutting a square out of it.
  @include border-top-end-radius(inherit);

  &.ribbon-lg {
    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-lg};
    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-lg * 1.3};
    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-lg};
  }

  &.ribbon-xl {
    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-xl};
    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-xl * 1.3};
    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-xl};
  }

  .ribbon {
    position: absolute;
    // 32.5% / 67.5% puts the band's centre on the corner bisector, close enough
    // to the corner to cover it; 50%/50% would park it at the far diagonal.
    top: 32.5%;
    left: 67.5%;
    width: var(--#{$lte-prefix}ribbon-width);
    padding: $lte-ribbon-padding;
    overflow: hidden;
    font-size: var(--#{$lte-prefix}ribbon-font-size);
    font-weight: $lte-ribbon-font-weight;
    line-height: 1.2;
    color: var(--#{$prefix}emphasis-color);
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--#{$prefix}secondary-bg);
    box-shadow: $lte-ribbon-shadow;
    transform: translate(-50%, -50%) rotate(45deg);

    // Ribbons carry a `.text-bg-*` utility for colour, so the link only needs
    // to inherit whatever contrast colour that utility picked.
    a {
      color: inherit;
      text-decoration: none;
    }
  }
}