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

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


// Validation message for a bundle product, printed under its Select button —
// the one element rendered per product, so it is where the message belongs.
.bundle__product__error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #c62828;
  white-space: normal;
}
[data-div-type="element"] {
  &[data-element-type="button"] {
    min-height: 24px !important;

    & > .wrapper {
      // width: 100%;
      height: 100%;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
    }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-icon-position="left"] {
      --_sf-fd-bn: row;
    }
    &[data-icon-position="right"] {
      --_sf-fd-bn: row-reverse;
    }
    &[data-icon-position="center"] {
      --_sf-fd-bn: row;
    }

    &:hover {
      --_sf-hr-bd-cr: var(
        --_ctm-mob-dn-hr-se-bd-cr,
        var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
      );
      --_sf-hr-br-cr: var(
        --_ctm-mob-dn-hr-se-br-cr,
        var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
      );
      --_sf-hr-br-se: var(
        --_ctm-mob-dn-hr-se-br-se,
        var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
      );
      --_sf-hr-br-wh: var(
        --_ctm-mob-dn-hr-se-br-wh,
        var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
      );
      --_sf-hr-br-rs: var(
        --_ctm-mob-dn-hr-se-br-rs,
        var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
      );

      // for shadow
      --_sf-hr-sw-ae: var(
        --_ctm-mob-dn-hr-se-sw-ae,
        var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
      );
      --_sf-hr-sw-br: var(
        --_ctm-mob-dn-hr-se-sw-br,
        var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br))
      );

      --_sf-hr-sw-cr: var(
        --_ctm-mob-dn-hr-se-sw-cr,
        var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr))
      );

      // for font

      --_sf-hr-cr: var(
        --_ctm-mob-dn-hr-se-cr,
        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
      );
      --_sf-hr-ft-fy: var(
        --_ctm-mob-dn-hr-se-ft-fy,
        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
      );
      --_sf-hr-tt-tm: var(
        --_ctm-mob-dn-hr-se-tt-tm,
        var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
      );
      --_sf-hr-ft-se: var(
        --_ctm-mob-dn-hr-se-ft-se,
        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
      );
      --_sf-hr-ft-wt: var(
        --_ctm-mob-dn-hr-se-ft-wt,
        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
      );
      --_sf-hr-ft-se-ic: var(
        --_ctm-mob-dn-hr-se-ft-se-ic,
        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
      );
      --_sf-hr-tt-an: var(
        --_ctm-mob-dn-hr-se-tt-an,
        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
      );
      --_sf-hr-lr-sg: var(
        --_ctm-mob-dn-hr-se-lr-sg,
        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
      );
      --_sf-hr-le-ht: var(
        --_ctm-mob-dn-hr-se-le-ht,
        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
      );

      --_sf-hr-txt-tr: var(
        --_ctm-mob-dn-hr-se-tt-tm,
        var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
      );
      --_sf-hr-wd-wp: var(
        --_ctm-mob-dn-hr-se-wd-wp,
        var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
      );
      --_sf-hr-wd-bk: var(
        --_ctm-mob-dn-hr-se-wd-bk,
        var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
      );

      --_sf-hr-in-se: var(
        --_ctm-mob-dn-hr-se-in-se,
        var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
      );

      --_sf-hr-in-c1: var(
        --_ctm-mob-dn-hr-se-in-c1,
        var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
      );
      --_sf-hr-ue: var(
        --_ctm-mob-dn-hr-se-ue,
        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
      );

      &[data-hover-show-shadow="false"] {
        --_hover-show-shadow: none;
      }
      &[data-hover-show-icon="false"] {
        --_hover-show-icon: none;
      }
    }
    &[data-show-icon="false"] {
      --_show-icon: none;
    }
    &[data-element-style="Icon"] {
      &[data-icon-position="left"] {
        --_sf-jc: start;
      }
      &[data-icon-position="right"] {
        --_sf-jc: end;
      }
      &[data-icon-position="center"] {
        --_sf-jc: center;
      }
    }

    .btn__with__text {
      background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dt-se-bd-cr));

      padding: prepareMediaVariable(--_ctm-lt-pg);
      display: flex;
      flex-direction: var(--_sf-fd-bn);
      align-items: center;

      justify-content: prepareMediaVariable(--_ctm-lt-at);
      gap: prepareMediaVariable(--_ctm-lt-gp);

      width: 100%;
      height: 100%;

      border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dt-se-br-rs));

      box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dt-se-sw-ae))
        var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dt-se-sw-br))
        var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dt-se-sw-sd))
        var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dt-se-sw-cr));

      &[data-show-border="true"] {
        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));

        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dt-se-br-se));

        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dt-se-br-wh));
      }

      .txt {
        display: flex;

        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dt-se-cr));

        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
        &.flex__overflow {
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }

        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));

        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dt-se-ft-wt));

        font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dt-se-ft-se-ic));

        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dt-se-tt-an));

        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dt-se-lr-sg));

        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));

        // The hover names have to match what the `&:hover` block above publishes:
        // `--_sf-hr-wd-wp` and `--_sf-hr-wd-bk`. Both of these read `--_sf-hr-txt-wd-bk`,
        // which is never set, so the hover word-break/word-wrap values never applied.
        // The word-wrap default was also pointed at `--_ctm-dn-tt-dt-se-wd-wp`, a prefix
        // the builder never emits, so Word Wrap did nothing in either state.
        text-transform: var(--_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm, none));
        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk, normal));
        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dt-se-wd-wp, normal));

        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
        // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
      }

      .icon {
        display: var(--_hover-show-icon, var(--_show-icon, flex));
        svg {
          width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
          height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));

          path {
            stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dt-se-in-c1));
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1.25);
          }
        }
      }
      [data-element-style="Text"] {
        display: inline-block;
        width: 100%;
      }

      .icon--hover {
        // position: absolute;
        // inset: 0;
        // opacity: 0;
        display: none;
        transition: opacity 0.2s ease;
      }

      &:hover .icon--hover {
        // opacity: 1;
        display: flex;
      }

      &:hover .icon--default {
        // opacity: 0;
        display: none;
      }
    }
  }
}

.action__button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  gap: 8px;
  & > span {
    display: flex;
  }

  &.btn__sm {
    padding-inline: 16px;
    font-size: 14px;
    svg {
      width: 16px;
      height: 16px;
    }
  }
  &.btn__md {
    padding-inline: 24px;
    font-size: 18px;
    svg {
      width: 20px;
      height: 20px;
    }
  }
  &.btn__lg {
    padding-inline: 32px;
    font-size: 24px;
    svg {
      width: 24px;
      height: 24px;
    }
  }

  &.primary {
    background-color: var(--_primary-400);
    color: var(--_base-white);

    &:hover {
      background-color: var(--_primary-500);
      color: var(--_base-white);
    }
  }
  &.secondary {
    background-color: var(--_gray-100);
    color: var(--_gray-700);
    &:hover {
      background-color: var(--_gray-200);
      color: var(--_gray-900);
    }
  }
  &.tertiary {
    background-color: transparent;
    &.primary__txt {
      color: var(--_primary-400);
      &:hover {
        color: var(--_primary-500);
      }
    }
    &.secondary__txt {
      color: var(--_gray-700);
      &:hover {
        color: var(--_gray-900);
      }
    }
  }
}