@use "sass:map";
@use "sass:list";

[data-div-type="element"] {
  &[data-element-type="lightbox"] {
    width: var(
      --_ctm-mob-el-wh-st-mx,
      var(
        --_ctm-tab-el-wh-st-mx,
        var(
          --_ctm-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)))
              )
          )
        )
      )
    );
    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%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    .modal__content__container {
      display: flex;
      width: 100%;
      height: 100%;
      .content__left {
        background-image: url("https://res.cloudinary.com/dg78ao4vi/image/upload/v1733726837/unsplash_bBiuSdck8tU_ssntkv.png");
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 10px;
        color: white;
        width: 60%;
        padding: 20px 40px;
        p {
          font-size: 20px;
          color: white;
          font-weight: 200;
        }
        .left__button {
          background-color: white;
          color: black;
          border-radius: 10px;
          float: left;
          margin-top: 20px;
          width: 150px;
          height: 40px;
          font-size: 15px;
        }
      }
      .content__right {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}