@use "./functions.scss" as *;

[data-div-type="element"][data-element-type="line"] {
  // width: 100%;
  width: var(--_sf-el-wh-st-mx,
      calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
          var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
  height: var(--_ctm-lt-ht);

  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

  aspect-ratio: 1 / var(--_sf-aspect-ratio);

  .wrapper {
    width: 100%;
    // height: 100%;
    min-height: prepareMediaVariable(--_ctm-lt-ht);
  }

  .line__container {
    position: relative;
    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

    height: 100%;
    // min-height: prepareMediaVariable(--_ctm-lt-ht);

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--_ctm-mob-dn-le-wt-bd-cr,
        var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr)));
    border-radius: var(--_ctm-mob-dn-le-wt-br-rs,
        var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs)));

    .line__core {
      display: block;
      background-color: transparent;
      border-top-style: solid;
    }
  }

  &[data-widget-border="true"] {
    .line__container {
      border-color: var(--_ctm-mob-dn-le-wt-br-cr,
          var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr)));
      border-style: var(--_ctm-mob-dn-le-wt-br-se,
          var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se)));
      border-width: var(--_ctm-mob-dn-le-wt-br-wh,
          var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh)));
    }
  }

  &[data-widget-shadow="true"] {
    .line__container {
      box-shadow: var(--_show-shadow,
          var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae))) var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br))) var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd))) var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr))));
    }
  }

  // ─── Horizontal Line ─────────────────────
  &[data-line-direction="horizontal"] {
    .line__core {
      width: 100%;
      height: 0;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
      // border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
    }

    &[data-line-style="solid"] .line__core {
      border-top-style: solid;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="dotted"] .line__core {
      border-top-style: dotted;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="dashed"] .line__core {
      border-top-style: dashed;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="double"] .line__core {
      border-top-style: double;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="groove"] .line__core {
      border-top-style: groove;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="ridge"] .line__core {
      border-top-style: ridge;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="inset"] .line__core {
      border-top-style: inset;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="outset"] .line__core {
      border-top-style: outset;
      border-width: prepareMediaVariable(--_ctm-lt-le-ts);
      border-color: prepareMediaVariable(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="none"] .line__core {
      border-top-style: none;
    }

    &[data-line-style="hidden"] .line__core {
      border-top-style: hidden;
    }

    &[data-show-line-end-points="true"] {

      .line__container::before,
      .line__container::after {
        content: "";
        position: absolute;
        width: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        height: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
      }

      .line__container::before {
        left: 0;
        width: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        height: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
        // border-color: var(--_ctm-dn-le-ed-ps-bd-cr);
        // border-color: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-cr,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-cr, var(--_ctm-dn-le-ed-ps-cr-br-cr))
        // );

        // border-style: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-se,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-se, var(--_ctm-dn-le-ed-ps-cr-br-se))
        // );
        // border-width: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-wh,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-wh, var(--_ctm-dn-le-ed-ps-cr-br-wh))
        // );
        box-shadow: var(--_ctm-mob-dn-le-ed-ps-cr-sw-ae,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-br,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-sd,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-cr,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr)));
      }

      .line__container::after {
        right: 0;
        width: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        height: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
        // border-color: var(--_ctm-dn-le-ed-ps-bd-cr);
        // border-color: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-cr,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-cr, var(--_ctm-dn-le-ed-ps-cr-br-cr))
        // );

        // border-style: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-se,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-se, var(--_ctm-dn-le-ed-ps-cr-br-se))
        // );
        // border-width: var(
        //   --_ctm-mob-dn-le-ed-ps-cr-br-wh,
        //   var(--_ctm-tab-dn-le-ed-ps-cr-br-wh, var(--_ctm-dn-le-ed-ps-cr-br-wh))
        // );
        box-shadow: var(--_ctm-mob-dn-le-ed-ps-cr-sw-ae,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-br,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-sd,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-cr,
            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr)));
      }

      &[data-line-end-points="square"] .line__container::before,
      &[data-line-end-points="square"] .line__container::after {
        border-radius: 0;
        width: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        height: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
      }
    }
  }

  // ─── Vertical Line ───────────────────────
  &[data-line-direction="vertical"] {
    .line__core {
      width: 0;
      height: 100%;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
      // border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
    }

    &[data-line-style="solid"] .line__core {
      border-left-style: solid;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="dotted"] .line__core {
      border-left-style: dotted;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="dashed"] .line__core {
      border-left-style: dashed;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="double"] .line__core {
      border-left-style: double;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="groove"] .line__core {
      border-left-style: groove;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="ridge"] .line__core {
      border-left-style: ridge;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="inset"] .line__core {
      border-left-style: inset;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="outset"] .line__core {
      border-left-style: outset;
      border-width: var(--_ctm-lt-le-ts);
      border-color: var(--_ctm-dn-le-cr-bd-cr);
    }

    &[data-line-style="none"] .line__core {
      border-left-style: none;
    }

    &[data-line-style="hidden"] .line__core {
      border-left-style: hidden;
    }

    &[data-show-line-end-points="true"] {

      .line__container::before,
      .line__container::after {
        content: "";
        position: absolute;
        width: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        height: prepareMediaVariable(--_ctm-lt-le-ed-ps-ts);
        // height: 8px;
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%; // Default is circle
      }

      .line__container::before {
        top: 0;
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
      }

      .line__container::after {
        bottom: 0;
        background-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-bd-cr);
      }

      &[data-line-end-points="square"] .line__container::before,
      &[data-line-end-points="square"] .line__container::after {
        border-radius: 0;
      }
    }
  }

  // ─── End Point Border ────────────────────
  // Kept last so it wins over the per-direction end point rules above.
  &[data-show-line-end-points="true"][data-show-line-end-points-border="true"] {

    .line__container::before,
    .line__container::after {
      // keeps the end point at its configured size once a border is added
      box-sizing: border-box;
      border-color: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-br-cr);
      border-style: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-br-se);
      border-width: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-br-wh);
    }
  }
}