@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

// typography

.flx-thm-typ-h1 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h1-tt-cr);
  font-family: var(--_thm-ty-h1-ft-fy);
  text-transform: var(--_thm-ty-h1-tt-tm);
  word-wrap: var(--_thm-ty-h1-wd-wp);
  word-break: var(--_thm-ty-h1-wd-bk);
  font-size: var(--_thm-ty-h1-ft-se);
  font-weight: var(--_thm-ty-h1-bd);
  font-style: var(--_thm-ty-h1-ic);
  text-align: var(--_thm-ty-h1-tt-an);
  letter-spacing: var(--_thm-ty-h1-cr-sg);
  line-height: var(--_thm-ty-h1-le-ht);
  text-decoration: var(--_thm-ty-h1-ue);
}

.flx-thm-typ-h2 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h2-tt-cr);
  font-family: var(--_thm-ty-h2-ft-fy);
  text-transform: var(--_thm-ty-h2-tt-tm);
  word-wrap: var(--_thm-ty-h2-wd-wp);
  word-break: var(--_thm-ty-h2-wd-bk);
  font-size: var(--_thm-ty-h2-ft-se);
  font-weight: var(--_thm-ty-h2-bd);
  font-style: var(--_thm-ty-h2-ic);
  text-align: var(--_thm-ty-h2-tt-an);
  letter-spacing: var(--_thm-ty-h2-cr-sg);
  line-height: var(--_thm-ty-h2-le-ht);
  text-decoration: var(--_thm-ty-h2-ue);
}
.flx-thm-typ-h3 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h3-tt-cr);
  font-family: var(--_thm-ty-h3-ft-fy);
  text-transform: var(--_thm-ty-h3-tt-tm);
  word-wrap: var(--_thm-ty-h3-wd-wp);
  word-break: var(--_thm-ty-h3-wd-bk);
  font-size: var(--_thm-ty-h3-ft-se);
  font-weight: var(--_thm-ty-h3-bd);
  font-style: var(--_thm-ty-h3-ic);
  text-align: var(--_thm-ty-h3-tt-an);
  letter-spacing: var(--_thm-ty-h3-cr-sg);
  line-height: var(--_thm-ty-h3-le-ht);
  text-decoration: var(--_thm-ty-h3-ue);
}
.flx-thm-typ-h4 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h4-tt-cr);
  font-family: var(--_thm-ty-h4-ft-fy);
  text-transform: var(--_thm-ty-h4-tt-tm);
  word-wrap: var(--_thm-ty-h4-wd-wp);
  word-break: var(--_thm-ty-h4-wd-bk);
  font-size: var(--_thm-ty-h4-ft-se);
  font-weight: var(--_thm-ty-h4-bd);
  font-style: var(--_thm-ty-h4-ic);
  text-align: var(--_thm-ty-h4-tt-an);
  letter-spacing: var(--_thm-ty-h4-cr-sg);
  line-height: var(--_thm-ty-h4-le-ht);
  text-decoration: var(--_thm-ty-h4-ue);
}
.flx-thm-typ-h6 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h6-tt-cr);
  font-family: var(--_thm-ty-h6-ft-fy);
  text-transform: var(--_thm-ty-h6-tt-tm);
  word-wrap: var(--_thm-ty-h6-wd-wp);
  word-break: var(--_thm-ty-h6-wd-bk);
  font-size: var(--_thm-ty-h6-ft-se);
  font-weight: var(--_thm-ty-h6-bd);
  font-style: var(--_thm-ty-h6-ic);
  text-align: var(--_thm-ty-h6-tt-an);
  letter-spacing: var(--_thm-ty-h6-cr-sg);
  line-height: var(--_thm-ty-h6-le-ht);
  text-decoration: var(--_thm-ty-h6-ue);
}

.flx-thm-typ-h5 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-h5-tt-cr);
  font-family: var(--_thm-ty-h5-ft-fy);
  text-transform: var(--_thm-ty-h5-tt-tm);
  word-wrap: var(--_thm-ty-h5-wd-wp);
  word-break: var(--_thm-ty-h5-wd-bk);
  font-size: var(--_thm-ty-h5-ft-se);
  font-weight: var(--_thm-ty-h5-bd);
  font-style: var(--_thm-ty-h5-ic);
  text-align: var(--_thm-ty-h5-tt-an);
  letter-spacing: var(--_thm-ty-h5-cr-sg);
  line-height: var(--_thm-ty-h5-le-ht);
  text-decoration: var(--_thm-ty-h5-ue);
}

.flx-thm-typ-p1 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-p1-tt-cr);
  font-family: var(--_thm-ty-p1-ft-fy);
  text-transform: var(--_thm-ty-p1-tt-tm);
  word-wrap: var(--_thm-ty-p1-wd-wp);
  word-break: var(--_thm-ty-p1-wd-bk);
  font-size: var(--_thm-ty-p1-ft-se);
  font-weight: var(--_thm-ty-p1-bd);
  font-style: var(--_thm-ty-p1-ic);
  text-align: var(--_thm-ty-p1-tt-an);
  letter-spacing: var(--_thm-ty-p1-cr-sg);
  line-height: var(--_thm-ty-p1-le-ht);
  text-decoration: var(--_thm-ty-p1-ue);
}
.flx-thm-typ-p2 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-p2-tt-cr);
  font-family: var(--_thm-ty-p2-ft-fy);
  text-transform: var(--_thm-ty-p2-tt-tm);
  word-wrap: var(--_thm-ty-p2-wd-wp);
  word-break: var(--_thm-ty-p2-wd-bk);
  font-size: var(--_thm-ty-p2-ft-se);
  font-weight: var(--_thm-ty-p2-bd);
  font-style: var(--_thm-ty-p2-ic);
  text-align: var(--_thm-ty-p2-tt-an);
  letter-spacing: var(--_thm-ty-p2-cr-sg);
  line-height: var(--_thm-ty-p2-le-ht);
  text-decoration: var(--_thm-ty-p2-ue);
}

.flx-thm-typ-p3 {
  // padding-inline: var(--_sf-cd-gp);
  color: var(--_thm-ty-p3-tt-cr);
  font-family: var(--_thm-ty-p3-ft-fy);
  text-transform: var(--_thm-ty-p3-tt-tm);
  word-wrap: var(--_thm-ty-p3-wd-wp);
  word-break: var(--_thm-ty-p3-wd-bk);
  font-size: var(--_thm-ty-p3-ft-se);
  font-weight: var(--_thm-ty-p3-bd);
  // font-style: var(--_thm-ty-p3-ic);
  text-align: var(--_thm-ty-p3-tt-an);
  letter-spacing: var(--_thm-ty-p3-cr-sg);
  line-height: var(--_thm-ty-p3-le-ht);
  text-decoration: var(--_thm-ty-p3-ue);
}

// buttons
.flx-thm-btn-primary {
  &:hover {
    --_sf-hr-bd-cr: var(--_thm-py-bs-hr-se-bd-cr);
    --_sf-hr-br-cr: var(--_thm-py-bs-hr-se-br-cr);
    --_sf-hr-br-se: var(--_thm-py-bs-hr-se-br-se);
    --_sf-hr-br-wh: var(--_thm-py-bs-hr-se-br-wh);
    --_sf-hr-br-rs: var(--_thm-py-bs-hr-se-br-rs);

    // for shadow
    --_sf-hr-sw-ae: var(--_thm-py-bs-hr-se-ae);
    --_sf-hr-sw-br: var(--_thm-py-bs-hr-se-br);
    --_sf-hr-sw-cr: var(--_thm-py-bs-hr-se-sw-cr);

    // for font
    --_sf-hr-cr: var(--_thm-py-bs-hr-se-tt-cr);
    --_sf-hr-ft-fy: var(--_thm-py-bs-hr-se-ft);
    --_sf-hr-ft-se: var(--_thm-py-bs-hr-se-ft-se);
    --_sf-hr-ft-wt: var(--_thm-py-bs-hr-se-bd);
    --_sf-hr-ft-se-ic: var(--_thm-py-bs-hr-se-ic);
    --_sf-hr-tt-an: var(--_thm-py-bs-hr-se-tt-an);
    --_sf-hr-cr-sg: var(--_thm-py-bs-hr-se-cr-sg);
    --_sf-hr-le-ht: var(--_thm-py-bs-hr-se-le-ht);

    --_sf-hr-in-se: var(--_thm-py-bs-hr-se-in-se);
    --_sf-hr-in-c1: var(--_thm-py-bs-hr-se-in-cr);
    --_sf-hr-ue: var(--_thm-py-bs-hr-se-ue);
  }

  background-color: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
  gap: var(--_thm-py-bs-in-ad-tt-sg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: var(--_sf-hr-tt-an, var(--_thm-py-bs-dt-se-tt-an));

  border-radius: var(--_sf-hr-br-rs, var(--_thm-py-bs-dt-se-br-rs));

  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-py-bs-dt-se-sw-ae))
    var(--_sf-hr-sw-br, var(--_thm-py-bs-dt-se-sw-br))
    var(--_sf-hr-sw-sd, var(--_thm-py-bs-dt-se-sw-sd))
    var(--_sf-hr-sw-cr, var(--_thm-py-bs-dt-se-sw-cr));

  &[data-show-border="true"] {
    border-color: var(--_sf-hr-br-cr, var(--_thm-py-bs-dt-se-br-cr));
    border-style: var(--_sf-hr-br-se, var(--_thm-py-bs-dt-se-br-se));
    border-width: var(--_sf-hr-br-wh, var(--_thm-py-bs-dt-se-br-wh));
  }

  // .txt {
  //   display: flex;
  //   color: var(--_sf-hr-cr, var(--_thm-py-bs-dt-se-cr));
  //   font-family: var(--_sf-hr-ft-fy, var(--_thm-py-bs-dt-se-ft-fy));
  //   font-size: var(--_sf-hr-ft-se, var(--_thm-py-bs-dt-se-ft-se));
  //   font-weight: var(--_sf-hr-ft-wt, var(--_thm-py-bs-dt-se-ft-wt));
  //   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-py-bs-dt-se-ft-se-ic));
  //   text-align: var(--_sf-hr-tt-an, var(--_thm-py-bs-dt-se-tt-an));
  //   letter-spacing: var(--_sf-hr-cr-sg, var(--_thm-py-bs-dt-se-cr-sg));
  //   line-height: var(--_sf-hr-le-ht, var(--_thm-py-bs-dt-se-le-ht));
  //   text-decoration: var(--_sf-hr-ue, var(--_thm-py-bs-dt-se-ue));
  // }

  color: var(--_sf-hr-cr, var(--_thm-py-bs-dt-se-tt-cr));
  font-family: var(--_sf-hr-ft-fy, var(--_thm-py-bs-dt-se-ft));
  text-transform: var(--_sf-hr-tt-tm, var(--_thm-py-bs-dt-se-ft));
  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-py-bs-dt-se-ft));
  word-break: var(--_sf-hr-wd-bk, var(--_thm-py-bs-dt-se-ft));
  &.flex__overflow {
    white-space: normal;
    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
  }
  font-size: var(--_sf-hr-ft-se, var(--_thm-py-bs-dt-se-ft-se));
  font-weight: var(--_sf-hr-ft-wt, var(--_thm-py-bs-dt-se-bd));
  font-style: var(--_sf-hr-ft-se-ic, var(--_thm-py-bs-dt-se-ic));
  text-align: var(--_sf-hr-tt-an, var(--_thm-py-bs-dt-se-tt-an));
  letter-spacing: var(--_sf-hr-cr-sg, var(--_thm-py-bs-dt-se-cr-sg));
  line-height: var(--_sf-hr-le-ht, var(--_thm-py-bs-dt-se-le-ht));
  text-decoration: var(--_sf-hr-ue, var(--_thm-py-bs-dt-se-ue));

  .icon {
    display: var(--_hover-show-icon, var(--_show-icon, flex));
    svg {
      width: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));
      height: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));

      path {
        stroke: var(--_sf-hr-in-c1, var(--_thm-py-bs-dt-se-in-c1));
      }
    }
  }

  [data-element-style="Text"] {
    display: inline-block;
    width: 100%;
  }
}

.flx-thm-btn-secondary {
  &:hover {
    --_sf-hr-bd-cr: var(--_thm-sy-bs-hr-se-bd-cr);
    --_sf-hr-br-cr: var(--_thm-sy-bs-hr-se-br-cr);
    --_sf-hr-br-se: var(--_thm-sy-bs-hr-se-br-se);
    --_sf-hr-br-wh: var(--_thm-sy-bs-hr-se-br-wh);
    --_sf-hr-br-rs: var(--_thm-sy-bs-hr-se-br-rs);

    // for shadow
    --_sf-hr-sw-ae: var(--_thm-sy-bs-hr-se-ae);
    --_sf-hr-sw-br: var(--_thm-sy-bs-hr-se-br);
    --_sf-hr-sw-cr: var(--_thm-sy-bs-hr-se-sw-cr);

    // for font
    --_sf-hr-cr: var(--_thm-sy-bs-hr-se-tt-cr);
    --_sf-hr-ft-fy: var(--_thm-sy-bs-hr-se-ft);
    --_sf-hr-ft-se: var(--_thm-sy-bs-hr-se-ft-se);
    --_sf-hr-ft-wt: var(--_thm-sy-bs-hr-se-bd);
    --_sf-hr-ft-se-ic: var(--_thm-sy-bs-hr-se-ic);
    --_sf-hr-tt-an: var(--_thm-sy-bs-hr-se-tt-an);
    --_sf-hr-cr-sg: var(--_thm-sy-bs-hr-se-cr-sg);
    --_sf-hr-le-ht: var(--_thm-sy-bs-hr-se-le-ht);

    --_sf-hr-in-se: var(--_thm-sy-bs-hr-se-in-se);
    --_sf-hr-in-c1: var(--_thm-sy-bs-hr-se-in-cr);
    --_sf-hr-ue: var(--_thm-sy-bs-hr-se-ue);
  }

  background-color: var(--_sf-hr-bd-cr, var(--_thm-sy-bs-dt-se-bd-cr));

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: var(--_sf-hr-tt-an, var(--_thm-sy-bs-dt-se-tt-an));
  gap: var(--_thm-sy-bs-in-ad-tt-sg);
  border-radius: var(--_sf-hr-br-rs, var(--_thm-sy-bs-dt-se-br-rs));

  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-sy-bs-dt-se-sw-ae))
    var(--_sf-hr-sw-br, var(--_thm-sy-bs-dt-se-sw-br))
    var(--_sf-hr-sw-sd, var(--_thm-sy-bs-dt-se-sw-sd))
    var(--_sf-hr-sw-cr, var(--_thm-sy-bs-dt-se-sw-cr));

  &[data-show-border="true"] {
    border-color: var(--_sf-hr-br-cr, var(--_thm-sy-bs-dt-se-br-cr));
    border-style: var(--_sf-hr-br-se, var(--_thm-sy-bs-dt-se-br-se));
    border-width: var(--_sf-hr-br-wh, var(--_thm-sy-bs-dt-se-br-wh));
  }

  // .txt {
  //   display: flex;
  //   color: var(--_sf-hr-cr, var(--_thm-sy-bs-dt-se-cr));
  //   font-family: var(--_sf-hr-ft-fy, var(--_thm-sy-bs-dt-se-ft-fy));
  //   font-size: var(--_sf-hr-ft-se, var(--_thm-sy-bs-dt-se-ft-se));
  //   font-weight: var(--_sf-hr-ft-wt, var(--_thm-sy-bs-dt-se-ft-wt));
  //   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-sy-bs-dt-se-ft-se-ic));
  //   text-align: var(--_sf-hr-tt-an, var(--_thm-sy-bs-dt-se-tt-an));
  //   letter-spacing: var(--_sf-hr-cr-sg, var(--_thm-sy-bs-dt-se-cr-sg));
  //   line-height: var(--_sf-hr-le-ht, var(--_thm-sy-bs-dt-se-le-ht));
  //   text-decoration: var(--_sf-hr-ue, var(--_thm-sy-bs-dt-se-ue));
  // }

  color: var(--_sf-hr-cr, var(--_thm-sy-bs-dt-se-tt-cr));
  font-family: var(--_sf-hr-ft-fy, var(--_thm-sy-bs-dt-se-ft));
  text-transform: var(--_sf-hr-tt-tm, var(--_thm-sy-bs-dt-se-ft));
  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-sy-bs-dt-se-ft));
  word-break: var(--_sf-hr-wd-bk, var(--_thm-sy-bs-dt-se-ft));
  &.flex__overflow {
    white-space: normal;
    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
  }
  font-size: var(--_sf-hr-ft-se, var(--_thm-sy-bs-dt-se-ft-se));
  font-weight: var(--_sf-hr-ft-wt, var(--_thm-sy-bs-dt-se-bd));
  font-style: var(--_sf-hr-ft-se-ic, var(--_thm-sy-bs-dt-se-ic));
  text-align: var(--_sf-hr-tt-an, var(--_thm-sy-bs-dt-se-tt-an));
  letter-spacing: var(--_sf-hr-cr-sg, var(--_thm-sy-bs-dt-se-cr-sg));
  line-height: var(--_sf-hr-le-ht, var(--_thm-sy-bs-dt-se-le-ht));
  text-decoration: var(--_sf-hr-ue, var(--_thm-sy-bs-dt-se-ue));

  .icon {
    display: var(--_hover-show-icon, var(--_show-icon, flex));
    svg {
      width: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));
      height: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));

      path {
        stroke: var(--_sf-hr-in-c1, var(--_thm-sy-bs-dt-se-in-c1));
      }
    }
  }

  [data-element-style="Text"] {
    display: inline-block;
    width: 100%;
  }
}

.flx-thm-btn-tertiary {
  &:hover {
    --_sf-hr-bd-cr: var(--_thm-ty-bs-hr-se-bd-cr);
    --_sf-hr-br-cr: var(--_thm-ty-bs-hr-se-br-cr);
    --_sf-hr-br-se: var(--_thm-ty-bs-hr-se-br-se);
    --_sf-hr-br-wh: var(--_thm-ty-bs-hr-se-br-wh);
    --_sf-hr-br-rs: var(--_thm-ty-bs-hr-se-br-rs);

    // for shadow
    --_sf-hr-sw-ae: var(--_thm-ty-bs-hr-se-ae);
    --_sf-hr-sw-br: var(--_thm-ty-bs-hr-se-br);
    --_sf-hr-sw-cr: var(--_thm-ty-bs-hr-se-sw-cr);

    // for font
    --_sf-hr-cr: var(--_thm-ty-bs-hr-se-tt-cr);
    --_sf-hr-ft-fy: var(--_thm-ty-bs-hr-se-ft);
    --_sf-hr-ft-se: var(--_thm-ty-bs-hr-se-ft-se);
    --_sf-hr-ft-wt: var(--_thm-ty-bs-hr-se-bd);
    --_sf-hr-ft-se-ic: var(--_thm-ty-bs-hr-se-ic);
    --_sf-hr-tt-an: var(--_thm-ty-bs-hr-se-tt-an);
    --_sf-hr-cr-sg: var(--_thm-ty-bs-hr-se-cr-sg);
    --_sf-hr-le-ht: var(--_thm-ty-bs-hr-se-le-ht);

    --_sf-hr-in-se: var(--_thm-ty-bs-hr-se-in-se);
    --_sf-hr-in-c1: var(--_thm-ty-bs-hr-se-in-cr);
    --_sf-hr-ue: var(--_thm-ty-bs-hr-se-ue);
  }

  background-color: var(--_sf-hr-bd-cr, var(--_thm-ty-bs-dt-se-bd-cr));

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: var(--_sf-hr-tt-an, var(--_thm-ty-bs-dt-se-tt-an));
  gap: var(--_thm-ty-bs-in-ad-tt-sg);
  border-radius: var(--_sf-hr-br-rs, var(--_thm-ty-bs-dt-se-br-rs));

  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-ty-bs-dt-se-sw-ae))
    var(--_sf-hr-sw-br, var(--_thm-ty-bs-dt-se-sw-br))
    var(--_sf-hr-sw-sd, var(--_thm-ty-bs-dt-se-sw-sd))
    var(--_sf-hr-sw-cr, var(--_thm-ty-bs-dt-se-sw-cr));

  &[data-show-border="true"] {
    border-color: var(--_sf-hr-br-cr, var(--_thm-ty-bs-dt-se-br-cr));
    border-style: var(--_sf-hr-br-se, var(--_thm-ty-bs-dt-se-br-se));
    border-width: var(--_sf-hr-br-wh, var(--_thm-ty-bs-dt-se-br-wh));
  }

  color: var(--_sf-hr-cr, var(--_thm-ty-bs-dt-se-tt-cr));
  font-family: var(--_sf-hr-ft-fy, var(--_thm-ty-bs-dt-se-ft));
  text-transform: var(--_sf-hr-tt-tm, var(--_thm-ty-bs-dt-se-ft));
  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-ty-bs-dt-se-ft));
  word-break: var(--_sf-hr-wd-bk, var(--_thm-ty-bs-dt-se-ft));
  &.flex__overflow {
    white-space: normal;
    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
  }
  font-size: var(--_sf-hr-ft-se, var(--_thm-ty-bs-dt-se-ft-se));
  font-weight: var(--_sf-hr-ft-wt, var(--_thm-ty-bs-dt-se-bd));
  font-style: var(--_sf-hr-ft-se-ic, var(--_thm-ty-bs-dt-se-ic));
  text-align: var(--_sf-hr-tt-an, var(--_thm-ty-bs-dt-se-tt-an));
  letter-spacing: var(--_sf-hr-cr-sg, var(--_thm-ty-bs-dt-se-cr-sg));
  line-height: var(--_sf-hr-le-ht, var(--_thm-ty-bs-dt-se-le-ht));
  text-decoration: var(--_sf-hr-ue, var(--_thm-ty-bs-dt-se-ue));

  .icon {
    display: var(--_hover-show-icon, var(--_show-icon, flex));
    svg {
      width: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));
      height: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));

      path {
        stroke: var(--_sf-hr-in-c1, var(--_thm-ty-bs-dt-se-in-c1));
      }
    }
  }

  [data-element-style="Text"] {
    display: inline-block;
    width: 100%;
  }
}