/* ===================================================
   OWNVIBE | CSS Color Stripe Border (Side Control)
   =================================================== */

.sto-border-gradient-3 {
  --c1: #dc5c82;
  --c2: #dceb3c;
  --c3: #87d2d7;
  --bw: 1px;

  --r-tl: 0px;
  --r-tr: 0px;
  --r-br: 0px;
  --r-bl: 0px;

  position: relative;
  background: transparent;

  border-radius:
    var(--r-tl)
    var(--r-tr)
    var(--r-br)
    var(--r-bl);
}

/* ====================================
   TOP
==================================== */

.sto-border--top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bw);

  background: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c2) 50%,
    var(--c3) 100%
  );

  border-top-left-radius: var(--r-tl);
  border-top-right-radius: var(--r-tr);

  pointer-events: none;
}

/* ====================================
   BOTTOM
==================================== */

.sto-border--bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bw);

  background: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c2) 50%,
    var(--c3) 100%
  );

  border-bottom-left-radius: var(--r-bl);
  border-bottom-right-radius: var(--r-br);

  pointer-events: none;
}

/* ====================================
   LEFT
==================================== */

.sto-border--left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--bw);

  background: linear-gradient(
    180deg,
    var(--c1) 0%,
    var(--c2) 50%,
    var(--c3) 100%
  );

  border-top-left-radius: var(--r-tl);
  border-bottom-left-radius: var(--r-bl);

  pointer-events: none;
}

/* ====================================
   RIGHT
==================================== */

.sto-border--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--bw);

  background: linear-gradient(
    180deg,
    var(--c1) 0%,
    var(--c2) 50%,
    var(--c3) 100%
  );

  border-top-right-radius: var(--r-tr);
  border-bottom-right-radius: var(--r-br);

  pointer-events: none;
}

/* ====================================
   Radius Utilities (wie gehabt)
==================================== */

.sto-border-gradient--rtop-10 {
  --r-tl: 10px;
  --r-tr: 10px;
}

.sto-border-gradient--rtop-20 {
  --r-tl: 20px;
  --r-tr: 20px;
}

.sto-border-gradient--rtop-30 {
  --r-tl: 30px;
  --r-tr: 30px;
}