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

$overflowSelector: ".flex__overflow";

[data-div-type="element"] {
  &[data-element-type="profile"] {
    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)))
          )
      )
    );

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

    aspect-ratio: 1 /
      var(--_ctm-mob-aspect-ratio, var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio)));

    & > .wrapper {
      width: 100%;
      height: 100%;
      // display: flex;
      // align-items: center;
      // justify-content: center;
    }

    &[data-layout-alignment="horizontal"] {
      .profile__container > .profile__section {
        flex-direction: row;
        align-items: prepareMediaVariable(--_ctm-lt-an-is, center);
        justify-content: prepareMediaVariable(--_ctm-lt-jy-ct, start);
      }
    }

    &[data-layout-alignment="vertical"] {
      .profile__container {
        height: 100%;
      }

      .profile__container > .profile__section {
        flex-direction: column;
        align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);
        justify-content: prepareMediaVariable(--_ctm-lt-an-is, center);
      }
    }

    &[data-show-text-avatar-border="true"] {
      .profile__avatar__initials {
        border-color: prepareMediaVariable(--_ctm-dn-tt-ar-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-tt-ar-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-tt-ar-br-wh);
      }
    }

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

    &[data-widget-shadow="false"] {
      --_show-shadow: none;
    }

    .profile__container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      background-color: var(
        --_sf-hr-bd-cr,
        var(--_ctm-mob-dn-pe-wt-bd-cr, var(--_ctm-tab-dn-pe-wt-bd-cr, var(--_ctm-dn-pe-wt-bd-cr)))
      );
      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-pe-wt-sw-ae, var(--_ctm-tab-dn-pe-wt-sw-ae, var(--_ctm-dn-pe-wt-sw-ae)))
          var(--_ctm-mob-dn-pe-wt-sw-br, var(--_ctm-tab-dn-pe-wt-sw-br, var(--_ctm-dn-pe-wt-sw-br)))
          var(--_ctm-mob-dn-pe-wt-sw-sd, var(--_ctm-tab-dn-pe-wt-sw-sd, var(--_ctm-dn-pe-wt-sw-sd)))
          var(--_ctm-mob-dn-pe-wt-sw-cr, var(--_ctm-tab-dn-pe-wt-sw-cr, var(--_ctm-dn-pe-wt-sw-cr)))
      );
      border-radius: var(
        --_sf-hr-br-br,
        var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
      );
      min-height: prepareMediaVariable(--_ctm-lt-ht);

      .profile__section {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: start;
        // gap: var(prepareMediaVariable(--_ctm-dn-pe-wt-in-gp));
        gap: prepareMediaVariable(--_ctm-dn-pe-wt-in-gp);
        width: 100%;
        height: 100%;

        .collapse__icon {
          width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
          height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
          transition: rotate 0.4s ease-in-out;

          svg {
            width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
            height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);

            path {
              stroke: var(
                --_ctm-mob-dn-ce-in-in-c1,
                var(--_ctm-tab-dn-ce-in-cr, var(--_ctm-dn-ce-in-in-c1))
              );
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-ce-in-se-wh, 1.25);
            }
          }
        }

        .profile__avatar__before__login {
          svg {
            width: prepareMediaVariable(--_ctm-dn-be-ln-ar-in-se);
            height: prepareMediaVariable(--_ctm-dn-be-ln-ar-in-se);

            path {
              stroke: var(
                --_ctm-mob-dn-be-ln-ar-in-c1,
                var(--_ctm-tab-dn-be-ln-ar-cr, var(--_ctm-dn-be-ln-ar-in-c1))
              );
              stroke-width: prepareMediaVariable(--_ctm-dn-be-ln-ar-se-wh);
            }
          }
        }

        .profile__avatar__after__login {
          svg {
            width: prepareMediaVariable(--_ctm-dn-ar-ln-ar-in-se);
            height: prepareMediaVariable(--_ctm-dn-ar-ln-ar-in-se);

            path {
              stroke: var(
                --_ctm-mob-dn-ar-ln-ar-in-c1,
                var(--_ctm-tab-dn-ar-ln-ar-cr, var(--_ctm-dn-ar-ln-ar-in-c1))
              );
              stroke-width: prepareMediaVariable(--_ctm-dn-ar-ln-ar-se-wh);
            }
          }
        }

        .profile__avatar__initials {
          // width: prepareMediaVariable(--_ctm-lt-tt-ar-se);
          // height: prepareMediaVariable(--_ctm-lt-tt-ar-se);
          width: var(--_ctm-mob-lt-tt-ar-se, var(--_ctm-tab-lt-tt-ar-se, var(--_ctm-lt-tt-ar-se)));
          height: var(--_ctm-mob-lt-tt-ar-se, var(--_ctm-tab-lt-tt-ar-se, var(--_ctm-lt-tt-ar-se)));
          background-color: prepareMediaVariable(--_ctm-dn-tt-ar-bd-cr);

          font-family: prepareMediaVariable(--_ctm-dn-tt-ar-ft-fy);
          word-wrap: prepareMediaVariable(--_ctm-dn-tt-ar-wd-wp);
          word-break: prepareMediaVariable(--_ctm-dn-tt-ar-wd-bk);

          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: prepareMediaVariable(--_ctm-dn-tt-ar-ft-se);
          color: prepareMediaVariable(--_ctm-dn-tt-ar-cr);
          font-weight: prepareMediaVariable(--_ctm-dn-tt-ar-ft-wt);
          text-decoration: prepareMediaVariable(--_ctm-dn-tt-ar-ue);
          font-style: prepareMediaVariable(--_ctm-dn-tt-ar-ft-se-ic);
          text-align: #{prepareMediaVariable(--_ctm-dn-tt-ar-tt-an)};
          letter-spacing: #{prepareMediaVariable(--_ctm-dn-tt-ar-lr-sg)};
          line-height: #{prepareMediaVariable(--_ctm-dn-tt-ar-le-ht)};
          border-radius: 50%;
          // color: white;
          // font-weight: 600;
          // font-size: 18px;
          display: flex;
          justify-content: center;
          text-transform: uppercase;
          align-items: center;
          // user-select: none;
          // letter-spacing: 1px;
        }

        .icon {
          display: flex;
          align-self: prepareMediaVariable(--_ctm-dn-pe-wt-in-vl-at);

          svg {
            width: prepareMediaVariable(--_ctm-dn-pe-wt-in-se);
            height: prepareMediaVariable(--_ctm-dn-pe-wt-in-se);

            path {
              stroke: prepareMediaVariable(--_ctm-dn-pe-wt-in-c1);
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-pe-wt-se-wh, 1.25);
            }
          }
        }

        // svg {
        //   path {
        //     stroke: var(
        //       --_ctm-mob-dn-ct-in-in-cr,
        //       var(--_ctm-tab-dn-ct-in-in-cr, var(--_ctm-dn-ct-in-in-cr))
        //     );
        // Overrides the stroke-width presentation attribute baked into the icon markup.
        stroke-width: prepareMediaVariable(--_ctm-dn-ct-in-se-wh, 1.25);
        //   }
        // }

        .profile__content {
          // font-size: 14px;
          display: flex;
          flex-direction: column;
          min-width: 0;
          max-width: 100%;

          // list-style: none;
          // line-height: 18px;
          .profile__label {
            color: var(
              --_ctm-mob-dn-pe-wt-cr,
              var(--_ctm-tab-dn-pe-wt-cr, var(--_ctm-dn-pe-wt-cr))
            );
            font-family: var(
              --_sf-hr-ff,
              var(
                --_ctm-mob-dn-pe-wt-ft-fy,
                var(--_ctm-tab-dn-pe-wt-ft-fy, var(--_ctm-dn-pe-wt-ft-fy))
              )
            );
            font-size: var(
              --_ctm-mob-dn-pe-wt-ft-se,
              var(--_ctm-tab-dn-pe-wt-ft-se, var(--_ctm-dn-pe-wt-ft-se))
            );
            font-weight: var(
              --_ctm-mob-dn-pe-wt-ft-wt,
              var(--_ctm-tab-dn-pe-wt-ft-wt, var(--_ctm-dn-pe-wt-ft-wt))
            );
            font-style: var(
              --_ctm-mob-dn-pe-wt-ft-se-ic,
              var(--_ctm-tab-dn-pe-wt-ft-se-ic, var(--_ctm-dn-pe-wt-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-pe-wt-tt-an,
              var(--_ctm-tab-dn-pe-wt-tt-an, var(--_ctm-dn-pe-wt-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-dn-pe-wt-lr-sg,
              var(--_ctm-tab-dn-pe-wt-lr-sg, var(--_ctm-dn-pe-wt-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-pe-wt-le-ht,
              var(--_ctm-tab-dn-pe-wt-le-ht, var(--_ctm-dn-pe-wt-le-ht))
            );
            text-decoration: var(
              --_ctm-mob-dn-pe-wt-ue,
              var(--_ctm-tab-dn-pe-wt-ue, var(--_ctm-dn-pe-wt-ue))
            );
            word-wrap: prepareMediaVariable(--_ctm-dn-pe-wt-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-pe-wt-wd-bk);
            text-transform: prepareMediaVariable(--_ctm-dn-pe-wt-tt-tm);

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
          }

          .profile__icon {
            // font-weight: 600;
            // font-size: 16px;
            color: var(
              --_ctm-mob-dn-pe-wt-cr-dc,
              var(--_ctm-tab-dn-pe-wt-cr-dc, var(--_ctm-dn-pe-wt-cr-dc))
            );
            font-family: var(
              --_sf-hr-ff,
              var(
                --_ctm-mob-dn-pe-wt-ft-fy-dc,
                var(--_ctm-tab-dn-pe-wt-ft-fy-dc, var(--_ctm-dn-pe-wt-ft-fy-dc))
              )
            );
            font-size: var(
              --_ctm-mob-dn-pe-wt-ft-se-dc,
              var(--_ctm-tab-dn-pe-wt-ft-se-dc, var(--_ctm-dn-pe-wt-ft-se-dc))
            );
            font-weight: var(
              --_ctm-mob-dn-pe-wt-ft-wt-dc,
              var(--_ctm-tab-dn-pe-wt-ft-wt-dc, var(--_ctm-dn-pe-wt-ft-wt-dc))
            );
            font-style: var(
              --_ctm-mob-dn-pe-wt-ft-se-ic-dc,
              var(--_ctm-tab-dn-pe-wt-ft-se-ic-dc, var(--_ctm-dn-pe-wt-ft-se-ic-dc, normal))
            );
            text-align: var(
              --_ctm-mob-dn-pe-wt-tt-an-dc,
              var(--_ctm-tab-dn-pe-wt-tt-an-dc, var(--_ctm-dn-pe-wt-tt-an-dc))
            );
            letter-spacing: var(
              --_ctm-mob-dn-pe-wt-lr-sg-dc,
              var(--_ctm-tab-dn-pe-wt-lr-sg-dc, var(--_ctm-dn-pe-wt-lr-sg-dc))
            );
            line-height: var(
              --_ctm-mob-dn-pe-wt-le-ht-dc,
              var(--_ctm-tab-dn-pe-wt-le-ht-dc, var(--_ctm-dn-pe-wt-le-ht-dc))
            );
            text-decoration: var(
              --_ctm-mob-dn-pe-wt-ue-dc,
              var(--_ctm-tab-dn-pe-wt-ue-dc, var(--_ctm-dn-pe-wt-ue-dc, none))
            );
            word-wrap: prepareMediaVariable(--_ctm-dn-pe-wt-wd-wp-dc);
            word-break: prepareMediaVariable(--_ctm-dn-pe-wt-wd-bk-dc);
            text-transform: prepareMediaVariable(--_ctm-dn-pe-wt-tt-tm-dc);

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
            }
          }
        }
      }

      .expand__icon {
        width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
        height: auto;
        // transition: rotate 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out;

        display: var(--_d-flex);
        align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-ed-in-vl-at));

        svg {
          width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
          height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);

          path {
            stroke: var(
              --_ctm-mob-dn-ed-in-in-c1,
              var(--_ctm-tab-dn-ed-in-cr, var(--_ctm-dn-ed-in-in-c1))
            );
            stroke-width: prepareMediaVariable(--_ctm-dn-ed-in-se-wh);
          }
        }

        &.open {
          transform: rotate(180deg);
        }
      }
    }

    .add_order_menu {
      display: flex;
      flex-direction: column;
      gap: prepareMediaVariable(--_ctm-dn-dn-is-cr-im-gp);
      position: absolute;
      top: calc(100% + prepareMediaVariable(--_ctm-dn-pe-wt-cr-ot-y, 0px));
      transform: translateX(calc(0% + prepareMediaVariable(--_ctm-dn-pe-wt-cr-ot-x, 0px)));
      right: 0;
      width: prepareMediaVariable(--_ctm-lt-dn-wh);
      background-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-bd-cr);
      border-radius: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-rs);
      // padding: 8px 0;
      padding: prepareMediaVariable(--_ctm-dn-dn-is-cr-pg);
      z-index: 100000;
      overflow: hidden;
      max-height: 200px;
      overflow-y: auto;

      &[data-show-items-container-border="true"] {
        border-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-wh);
      }

      &[data-show-items-container-shadow="true"] {
        box-shadow: prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-ae)
          prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-br)
          prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-sd)
          prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-cr);
      }

      &.show__panel {
        animation: slideUp 0.4s ease-in-out;
      }

      &.hide__panel {
        animation: slideDown 0.4s ease-in-out;
        pointer-events: none;
      }
    }

    .add_order_item {
      padding: prepareMediaVariable(--_ctm-dn-pe-wt-pg);
      background-color: var(
        --_ctm-mob-dn-dn-is-dt-se-bd-cr,
        var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
      );

      .icon {
        display: flex;
        align-items: center;
        align-self: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-vl-at);

        svg {
          width: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-se);
          height: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-se);

          path {
            stroke: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-c1);
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-se-wh, 1.25);
          }
        }
      }

      // font-size: 15px;
      // font-weight: 500;
      // color: #1f2937;
      display: flex;
      align-items: center;
      gap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-gp);
      // transition: background 0.2s;
      cursor: pointer;

      > .add_order_item__link {
        flex: 1;
        min-width: 0;
        max-width: 100%;
      }

      .add_order_item__label {
        display: block;
        flex: 1;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        word-wrap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-wp);
        overflow-wrap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-wp);
        word-break: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-bk);
        text-transform: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-tt-tm);
      }

      &[data-dropdown-items-default-overflow="true"] .add_order_item__label {
        @include restrictToLinesShow(#{var(--_sf-dropdown-line-clamp, 1)});
      }

      &[data-dropdown-items-default-border="true"] {
        border-color: var(
          --_sf-hr-br-cr,
          var(
            --_ctm-mob-dn-dn-is-dt-se-br-cr,
            var(--_ctm-tab-dn-dn-is-dt-se-br-cr, var(--_ctm-dn-dn-is-dt-se-br-cr))
          )
        );
        border-style: var(
          --_sf-hr-br-st,
          var(
            --_ctm-mob-dn-dn-is-dt-se-br-se,
            var(--_ctm-tab-dn-dn-is-dt-se-br-se, var(--_ctm-dn-dn-is-dt-se-br-se))
          )
        );
        border-width: var(
          --_sf-hr-br-wh,
          var(
            --_ctm-mob-dn-dn-is-dt-se-br-wh,
            var(--_ctm-tab-dn-dn-is-dt-se-br-wh, var(--_ctm-dn-dn-is-dt-se-br-wh))
          )
        );
      }

      &[data-dropdown-items-default-shadow="true"] {
        box-shadow: var(
          --_show-shadow-clear-all,
          var(
              --_ctm-mob-dn-dn-is-dt-se-sw-ae,
              var(--_ctm-tab-dn-dn-is-dt-se-sw-ae, var(--_ctm-dn-dn-is-dt-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-dn-is-dt-se-sw-br,
              var(--_ctm-tab-dn-dn-is-dt-se-sw-br, var(--_ctm-dn-dn-is-dt-se-sw-br))
            )
            var(
              --_ctm-mob-dn-dn-is-dt-se-sw-sd,
              var(--_ctm-tab-dn-dn-is-dt-se-sw-sd, var(--_ctm-dn-dn-is-dt-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-dn-is-dt-se-sw-cr,
              var(--_ctm-tab-dn-dn-is-dt-se-sw-cr, var(--_ctm-dn-dn-is-dt-se-sw-cr))
            )
        );
      }

      // background-color: #f5f7ff;
      // color: #3b49df;

      background-color: var(
        --_ctm-mob-dn-dn-is-dt-se-bd-cr,
        var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
      );
      border-radius: var(
        --_ctm-mob-dn-dn-is-dt-se-br-rs,
        var(--_ctm-tab-dn-dn-is-dt-se-br-rs, var(--_ctm-dn-dn-is-dt-se-br-rs))
      );
      box-shadow: var(
        --_show-shadow-clear-all,
        var(
            --_ctm-mob-dn-dn-is-dt-se-sw-ae,
            var(--_ctm-tab-dn-dn-is-dt-se-sw-ae, var(--_ctm-dn-dn-is-dt-se-sw-ae))
          )
          var(
            --_ctm-mob-dn-dn-is-dt-se-sw-br,
            var(--_ctm-tab-dn-dn-is-dt-se-sw-br, var(--_ctm-dn-dn-is-dt-se-sw-br))
          )
          var(
            --_ctm-mob-dn-dn-is-dt-se-sw-sd,
            var(--_ctm-tab-dn-dn-is-dt-se-sw-sd, var(--_ctm-dn-dn-is-dt-se-sw-sd))
          )
          var(
            --_ctm-mob-dn-dn-is-dt-se-sw-cr,
            var(--_ctm-tab-dn-dn-is-dt-se-sw-cr, var(--_ctm-dn-dn-is-dt-se-sw-cr))
          )
      );
      color: var(
        --_ctm-mob-dn-dn-is-dt-se-cr,
        var(--_ctm-tab-dn-dn-is-dt-se-cr, var(--_ctm-dn-dn-is-dt-se-cr))
      );

      font-family: var(
        --_sf-hr-ff,
        var(
          --_ctm-mob-dn-dn-is-dt-se-ft-fy,
          var(--_ctm-tab-dn-dn-is-dt-se-ft-fy, var(--_ctm-dn-dn-is-dt-se-ft-fy))
        )
      );
      text-transform: var(
        --_sf-hr-tt-tm,
        var(
          --_ctm-mob-dn-dn-is-dt-se-tt-tm,
          var(--_ctm-tab-dn-dn-is-dt-se-tt-tm, var(--_ctm-dn-dn-is-dt-se-tt-tm))
        )
      );
      word-wrap: var(
        --_sf-hr-wd-wp,
        var(
          --_ctm-mob-dn-dn-is-dt-se-wd-wp,
          var(--_ctm-tab-dn-dn-is-dt-se-wd-wp, var(--_ctm-dn-dn-is-dt-se-wd-wp))
        )
      );
      word-break: var(
        --_sf-hr-wd-bk,
        var(
          --_ctm-mob-dn-dn-is-dt-se-wd-bk,
          var(--_ctm-tab-dn-dn-is-dt-se-wd-bk, var(--_ctm-dn-dn-is-dt-se-wd-bk))
        )
      );

      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }

      font-size: var(
        --_ctm-mob-dn-dn-is-dt-se-ft-se,
        var(--_ctm-tab-dn-dn-is-dt-se-ft-se, var(--_ctm-dn-dn-is-dt-se-ft-se))
      );

      font-weight: var(
        --_ctm-mob-dn-dn-is-dt-se-ft-wt,
        var(--_ctm-tab-dn-dn-is-dt-se-ft-wt, var(--_ctm-dn-dn-is-dt-se-ft-wt))
      );

      font-style: var(
        --_ctm-mob-dn-dn-is-dt-se-ft-se-ic,
        var(--_ctm-tab-dn-dn-is-dt-se-ft-se-ic, var(--_ctm-dn-dn-is-dt-se-ft-se-ic))
      );

      text-align: var(
        --_ctm-mob-dn-dn-is-dt-se-tt-an,
        var(--_ctm-tab-dn-dn-is-dt-se-tt-an, var(--_ctm-dn-dn-is-dt-se-tt-an))
      );

      letter-spacing: var(
        --_ctm-mob-dn-dn-is-dt-se-lr-sg,
        var(--_ctm-tab-dn-dn-is-dt-se-lr-sg, var(--_ctm-dn-dn-is-dt-se-lr-sg))
      );

      line-height: var(
        --_ctm-mob-dn-dn-is-dt-se-le-ht,
        var(--_ctm-tab-dn-dn-is-dt-se-le-ht, var(--_ctm-dn-dn-is-dt-se-le-ht))
      );

      text-decoration: var(
        --_ctm-mob-dn-dn-is-dt-se-ue,
        var(--_ctm-tab-dn-dn-is-dt-se-ue, var(--_ctm-dn-dn-is-dt-se-ue))
      );

      &:hover {
        .add_order_item__label {
          white-space: normal;
          word-wrap: prepareMediaVariable(
            --_ctm-dn-dn-is-hr-se-wd-wp,
            var(--_ctm-dn-dn-is-dt-se-wd-wp)
          );
          overflow-wrap: prepareMediaVariable(
            --_ctm-dn-dn-is-hr-se-wd-wp,
            var(--_ctm-dn-dn-is-dt-se-wd-wp)
          );
          word-break: prepareMediaVariable(
            --_ctm-dn-dn-is-hr-se-wd-bk,
            var(--_ctm-dn-dn-is-dt-se-wd-bk)
          );
          text-transform: prepareMediaVariable(
            --_ctm-dn-dn-is-hr-se-tt-tm,
            var(--_ctm-dn-dn-is-dt-se-tt-tm)
          );
        }

        &[data-dropdown-items-hover-border="true"] {
          border-color: var(
            --_sf-hr-br-cr,
            var(
              --_ctm-mob-dn-dn-is-dt-se-br-cr,
              var(--_ctm-tab-dn-dn-is-hr-se-br-cr, var(--_ctm-dn-dn-is-hr-se-br-cr))
            )
          );
          border-style: var(
            --_sf-hr-br-st,
            var(
              --_ctm-mob-dn-dn-is-hr-se-br-se,
              var(--_ctm-tab-dn-dn-is-hr-se-br-se, var(--_ctm-dn-dn-is-hr-se-br-se))
            )
          );
          border-width: var(
            --_sf-hr-br-wh,
            var(
              --_ctm-mob-dn-dn-is-hr-se-br-wh,
              var(--_ctm-tab-dn-dn-is-hr-se-br-wh, var(--_ctm-dn-dn-is-hr-se-br-wh))
            )
          );
        }

        &[data-dropdown-items-hover-shadow="true"] {
          box-shadow: var(
            --_show-shadow-clear-all,
            var(
                --_ctm-mob-dn-dn-is-hr-se-sw-ae,
                var(--_ctm-tab-dn-dn-is-hr-se-sw-ae, var(--_ctm-dn-dn-is-hr-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-dn-is-hr-se-sw-br,
                var(--_ctm-tab-dn-dn-is-hr-se-sw-br, var(--_ctm-dn-dn-is-hr-se-sw-br))
              )
              var(
                --_ctm-mob-dn-dn-is-hr-se-sw-sd,
                var(--_ctm-tab-dn-dn-is-hr-se-sw-sd, var(--_ctm-dn-dn-is-hr-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-dn-is-hr-se-sw-cr,
                var(--_ctm-tab-dn-dn-is-hr-se-sw-cr, var(--_ctm-dn-dn-is-hr-se-sw-cr))
              )
          );
        }

        // background-color: #f5f7ff;
        // color: #3b49df;

        background-color: var(
          --_ctm-mob-dn-dn-is-hr-se-bd-cr,
          var(--_ctm-tab-dn-dn-is-hr-se-bd-cr, var(--_ctm-dn-dn-is-hr-se-bd-cr))
        );
        border-radius: var(
          --_ctm-mob-dn-dn-is-hr-se-br-rs,
          var(--_ctm-tab-dn-dn-is-hr-se-br-rs, var(--_ctm-dn-dn-is-hr-se-br-rs))
        );
        box-shadow: var(
          --_show-shadow-clear-all,
          var(
              --_ctm-mob-dn-dn-is-hr-se-sw-ae,
              var(--_ctm-tab-dn-dn-is-hr-se-sw-ae, var(--_ctm-dn-dn-is-hr-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-dn-is-hr-se-sw-br,
              var(--_ctm-tab-dn-dn-is-hr-se-sw-br, var(--_ctm-dn-dn-is-hr-se-sw-br))
            )
            var(
              --_ctm-mob-dn-dn-is-hr-se-sw-sd,
              var(--_ctm-tab-dn-dn-is-hr-se-sw-sd, var(--_ctm-dn-dn-is-hr-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-dn-is-hr-se-sw-cr,
              var(--_ctm-tab-dn-dn-is-hr-se-sw-cr, var(--_ctm-dn-dn-is-hr-se-sw-cr))
            )
        );
        color: var(
          --_ctm-mob-dn-dn-is-hr-se-cr,
          var(--_ctm-tab-dn-dn-is-hr-se-cr, var(--_ctm-dn-dn-is-hr-se-cr))
        );

        font-family: var(
          --_sf-hr-ff,
          var(
            --_ctm-mob-dn-dn-is-hr-se-ft-fy,
            var(--_ctm-tab-dn-dn-is-hr-se-ft-fy, var(--_ctm-dn-dn-is-hr-se-ft-fy))
          )
        );
        text-transform: var(
          --_sf-hr-tt-tm,
          var(
            --_ctm-mob-dn-dn-is-hr-se-tt-tm,
            var(--_ctm-tab-dn-dn-is-hr-se-tt-tm, var(--_ctm-dn-dn-is-hr-se-tt-tm))
          )
        );
        word-wrap: var(
          --_sf-hr-wd-wp,
          var(
            --_ctm-mob-dn-dn-is-hr-se-wd-wp,
            var(--_ctm-tab-dn-dn-is-hr-se-wd-wp, var(--_ctm-dn-dn-is-hr-se-wd-wp))
          )
        );
        word-break: var(
          --_sf-hr-wd-bk,
          var(
            --_ctm-mob-dn-dn-is-hr-se-wd-bk,
            var(--_ctm-tab-dn-dn-is-hr-se-wd-bk, var(--_ctm-dn-dn-is-hr-se-wd-bk))
          )
        );

        font-size: var(
          --_ctm-mob-dn-dn-is-hr-se-ft-se,
          var(--_ctm-tab-dn-dn-is-hr-se-ft-se, var(--_ctm-dn-dn-is-hr-se-ft-se))
        );

        font-weight: var(
          --_ctm-mob-dn-dn-is-hr-se-ft-wt,
          var(--_ctm-tab-dn-dn-is-hr-se-ft-wt, var(--_ctm-dn-dn-is-hr-se-ft-wt))
        );

        font-style: var(
          --_ctm-mob-dn-dn-is-hr-se-ft-se-ic,
          var(--_ctm-tab-dn-dn-is-hr-se-ft-se-ic, var(--_ctm-dn-dn-is-hr-se-ft-se-ic))
        );

        text-align: var(
          --_ctm-mob-dn-dn-is-hr-se-tt-an,
          var(--_ctm-tab-dn-dn-is-hr-se-tt-an, var(--_ctm-dn-dn-is-hr-se-tt-an))
        );

        letter-spacing: var(
          --_ctm-mob-dn-dn-is-hr-se-lr-sg,
          var(--_ctm-tab-dn-dn-is-hr-se-lr-sg, var(--_ctm-dn-dn-is-hr-se-lr-sg))
        );

        line-height: var(
          --_ctm-mob-dn-dn-is-hr-se-le-ht,
          var(--_ctm-tab-dn-dn-is-hr-se-le-ht, var(--_ctm-dn-dn-is-hr-se-le-ht))
        );

        text-decoration: var(
          --_ctm-mob-dn-dn-is-hr-se-ue,
          var(--_ctm-tab-dn-dn-is-hr-se-ue, var(--_ctm-dn-dn-is-hr-se-ue))
        );

        // Hover icon styling falls back to the default state so an item that was
        // never given a hover icon design does not jump on hover.
        gap: prepareMediaVariable(--_ctm-dn-dn-is-hr-se-in-gp, var(--_ctm-dn-dn-is-dt-se-in-gp));

        .icon {
          align-self: prepareMediaVariable(
            --_ctm-dn-dn-is-hr-se-vl-at,
            var(--_ctm-dn-dn-is-dt-se-vl-at)
          );

          svg {
            width: prepareMediaVariable(
              --_ctm-dn-dn-is-hr-se-in-se,
              var(--_ctm-dn-dn-is-dt-se-in-se)
            );
            height: prepareMediaVariable(
              --_ctm-dn-dn-is-hr-se-in-se,
              var(--_ctm-dn-dn-is-dt-se-in-se)
            );

            path {
              stroke: prepareMediaVariable(
                --_ctm-dn-dn-is-hr-se-in-c1,
                var(--_ctm-dn-dn-is-dt-se-in-c1)
              );
            }
          }
        }
      }

      a {
        display: block;
      }
    }

    // .icon {
    //   width: 50px;
    //   height: 50px;
    // }

    // .profile-name {
    //   font-size: 1rem;
    //   font-weight: bold;
    // }
  }
}