@property --madry-action-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.v5-bottom-actions .v5-add-line,
.v5-bottom-actions #v5AddOS {
  --madry-action-color: #e83a50;
  --madry-action-soft: #e83a502e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent !important;
  background:
    linear-gradient(#131113, #131113) padding-box,
    conic-gradient(from var(--madry-action-angle), transparent 0 72%, var(--madry-action-color) 86%, transparent 100%) border-box !important;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.v5-bottom-actions #v5AddOS { --madry-action-color:#2ed9a5; --madry-action-soft:#2ed9a52e; }
.v5-bottom-actions #v5AddShowcase { --madry-action-color:#9a7cff; --madry-action-soft:#9a7cff2e; }
.v5-bottom-actions #v5AddWarranty { --madry-action-color:#f0c23d; --madry-action-soft:#f0c23d2e; }
.v5-bottom-actions #v5AddLoss { --madry-action-color:#ff4057; --madry-action-soft:#ff40572e; }
.v5-bottom-actions #v5AddVoucher { --madry-action-color:#e0b22e; --madry-action-soft:#e0b22e2e; }
.v5-bottom-actions #v5AddLostSale { --madry-action-color:#ff6071; --madry-action-soft:#ff60712e; }

.v5-bottom-actions .v5-add-line::after,
.v5-bottom-actions #v5AddOS::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(110deg, transparent 12%, color-mix(in srgb, var(--madry-action-color) 24%, transparent) 48%, transparent 78%);
  transform: translateX(-100%);
}

.v5-bottom-actions .v5-add-line:hover,
.v5-bottom-actions #v5AddOS:hover,
.v5-bottom-actions .v5-add-line:focus-visible,
.v5-bottom-actions #v5AddOS:focus-visible,
.v5-bottom-actions .madry-action-selected {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--madry-action-color), 0 0 22px var(--madry-action-soft), inset 0 0 16px var(--madry-action-soft);
  animation: madryActionOutline .8s linear forwards, madryActionGlow .42s .78s ease-out;
}

.v5-bottom-actions .v5-add-line:hover::after,
.v5-bottom-actions #v5AddOS:hover::after,
.v5-bottom-actions .v5-add-line:focus-visible::after,
.v5-bottom-actions #v5AddOS:focus-visible::after,
.v5-bottom-actions .madry-action-selected::after {
  opacity: 1;
  animation: madryActionSweep .7s .42s ease-out forwards;
}

@keyframes madryActionOutline {
  from { --madry-action-angle: 0deg; }
  to { --madry-action-angle: 360deg; }
}
@keyframes madryActionGlow {
  50% { filter: brightness(1.7); }
  to { filter: brightness(1.08); }
}
@keyframes madryActionSweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .v5-bottom-actions .v5-add-line,
  .v5-bottom-actions #v5AddOS,
  .v5-bottom-actions .v5-add-line::after,
  .v5-bottom-actions #v5AddOS::after { animation: none !important; transition: none; }
}