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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="sort"] {
    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)));

    // The Design tab's Sort Button toggles. Both are CONTROLS with no CSS property of
    // their own, so the element publishes them as data attributes and the styling has
    // to act on them here — an unhandled toggle stores a value that never reaches the
    // page, which is what the whole Design tab did before these variables were wired.
    &[data-sort-button-shadow="false"] {
      --_show-shadow-sort-button: none;
    }
    &[data-sort-button-border="false"] {
      .est__dropdown {
        border: none;
      }
    }

    & > div {
      &.wrapper {
        width: 100%;
      }
    }
    //Dropdown
    .est__dropdown__main {
      position: relative;
      width: 100%;

      label {
        font-size: 14px;
        color: var(--_gray-700);
        margin-bottom: 8px;
        display: block;
      }

      .est__dropdown {
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;

        // Design > Sort Button. `--_ctm-dn-st-bn-*` is what the schema's
        // design.sortButton scope emits: splitCamelCaseAndJoin("design") -> "dn",
        // ("sortButton") -> "st-bn". The literals stay as the fallbacks so an element
        // saved before the Design tab existed keeps the look it had.
        background-color: prepareMediaVariable(--_ctm-dn-st-bn-bd-cr, #fff);
        border-color: prepareMediaVariable(--_ctm-dn-st-bn-br-cr, transparent);
        border-style: prepareMediaVariable(--_ctm-dn-st-bn-br-se, solid);
        border-width: prepareMediaVariable(--_ctm-dn-st-bn-br-wh, 0);
        border-radius: prepareMediaVariable(--_ctm-dn-st-bn-br-rs, 6px);
        box-shadow: var(
          --_show-shadow-sort-button,
          prepareMediaVariable(--_ctm-dn-st-bn-sw-ae, 0 0)
            prepareMediaVariable(--_ctm-dn-st-bn-sw-br, 0)
            prepareMediaVariable(--_ctm-dn-st-bn-sw-sd, 0)
            prepareMediaVariable(--_ctm-dn-st-bn-sw-cr, transparent)
        );

        .value__selected {
          display: flex;
          align-items: baseline;
          gap: 4px;
          // The title and the value are laid out side by side, so the pair has to be
          // allowed to shrink — without min-width the flex item keeps its content
          // width and pushes the chevron out of a narrow element instead of clamping.
          min-width: 0;
          flex: 1;
        }

        // Text Overflow is a CONTROL, not CSS: the element adds this class and
        // publishes the line count inline, one variable per typography scope.
        .sort__title.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }
        .selected__option.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
        }

        // Design > Sort Title (design.sortTitle -> "dn-st-te")
        .sort__title {
          color: prepareMediaVariable(--_ctm-dn-st-te-cr, var(--_gray-700));
          font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-st-te-ft-fy, inherit));
          font-size: prepareMediaVariable(--_ctm-dn-st-te-ft-se, inherit);
          font-weight: prepareMediaVariable(--_ctm-dn-st-te-ft-wt, inherit);
          font-style: prepareMediaVariable(--_ctm-dn-st-te-ft-se-ic, normal);
          text-align: prepareMediaVariable(--_ctm-dn-st-te-tt-an, left);
          letter-spacing: prepareMediaVariable(--_ctm-dn-st-te-lr-sg, normal);
          line-height: prepareMediaVariable(--_ctm-dn-st-te-le-ht, normal);
          text-decoration: prepareMediaVariable(--_ctm-dn-st-te-ue, none);
        }

        // Design > Selected Option (design.selectedOption -> "dn-sd-on")
        .selected__option {
          color: prepareMediaVariable(--_ctm-dn-sd-on-cr, var(--_gray-700));
          font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
          font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
          font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
          font-style: prepareMediaVariable(--_ctm-dn-sd-on-ft-se-ic, normal);
          text-align: prepareMediaVariable(--_ctm-dn-sd-on-tt-an, left);
          letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
          line-height: prepareMediaVariable(--_ctm-dn-sd-on-le-ht, normal);
          text-decoration: prepareMediaVariable(--_ctm-dn-sd-on-ue, none);
        }

        &.open .list {
          display: flex;
        }

        .list {
          display: none;
          flex-direction: column;
          border: 1px solid var(--_gray-200);
          border-radius: 6px;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: #fff;
          border-radius: 4px;
          z-index: var(--_higher-zIndex);
          max-height: 200px;
          overflow-y: auto;

          &.top {
            bottom: 100%;
            top: auto;
          }

          .list__option {
            padding: 12px;
            cursor: pointer;
            // The list has no design scope of its own. It borrows the Selected
            // Option's type so the open list matches the closed control — colour and
            // alignment are left to the list's own resting/hover rules below, which
            // are what make an option look clickable.
            font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
            font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
            font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
            letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
            color: var(--_gray-700);

            &:hover {
              background-color: var(--_primary-25);
              color: var(--_primary-400);
            }

            &[aria-selected="true"] {
              background-color: var(--_primary-25);
              color: var(--_primary-400);
            }
          }
        }
      }
    }
  }
}