{"version":3,"sources":["_dropdown.scss"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,MAAM;AACN;;EAEE,kBAAkB;AACpB;;AAEA;;EAEE,aAAa;EACb,WAAW;EACX,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,OAAO;EACP,sBAAsB;EACtB,SAAS;EACT,UAAU;EACV,8DAA8D;EAC9D,mCAAmC;EACnC,0BAA0B;EAC1B,yBAAyB;EACzB,kDAAkD;EAClD,kCAAkC;EAClC,4BAA4B;EAC5B,mBAAmB;;EAEnB;IACE,WAAW;IACX,gBAAgB;IAChB;4CACwC;IACxC,gBAAgB;;IAEhB;MACE,4DAA4D;IAC9D;;IAEA;MACE,+DAA+D;IACjE;;IAEA;MACE,cAAc;MACd;yDACmD;MACnD;8CACwC;MACxC,gBAAgB;MAChB,4BAA4B;MAC5B,qBAAqB;MACrB,uBAAuB;;MAEvB;QACE,wDAAwD;MAC1D;IACF;EACF;AACF;;AAEA,QAAQ;AACR;;EAEE;IACE,cAAc;IACd,WAAW;IACX,4CAA4C;IAC5C,2BAA2B;IAC3B,YAAY;IACZ,uBAAuB;IACvB,iCAAiC;IACjC,0BAA0B;IAC1B,4BAA4B;IAC5B,WAAW;EACb;AACF;;AAEA,sBAAsB;AACtB;EACE,UAAU;EACV,mBAAmB;;EAEnB,6BAA6B;EAC7B;IACE,gBAAgB;;IAEhB;MACE;;;OAGC;MACD;8CACwC;MACxC,kEAAkE;MAClE,mCAAmC;MACnC,sDAAsD;MACtD,4CAA4C;MAC5C,oBAAoB;MACpB,eAAe;;MAEf;QACE;;sCAE8B;MAChC;;MAEA;;QAEE,qDAAqD;QACrD,6DAA6D;MAC/D;;MAEA;QACE,sEAAsE;MACxE;IACF;EACF;;EAEA,gCAAgC;EAChC;IACE,6BAA6B;IAC7B,4BAA4B;;IAE5B;MACE,cAAc;MACd,UAAU;MACV,eAAe;MACf,MAAM;MACN,QAAQ;MACR,SAAS;MACT,OAAO;MACP,gBAAgB;MAChB,WAAW;MACX,eAAe;IACjB;EACF;AACF;;AAEA,4BAA4B;AAC5B;;EAEE,aAAa;EACb,cAAc;AAChB;;AAEA;;EAEE,sBAAsB;EACtB,mCAAmC;;EAEnC;IACE,gBAAgB;EAClB;AACF;;AAEA,4CAA4C;AAC5C;EACE;;IAEE,YAAY;IACZ,4EAA4E;EAC9E;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,gCAAgC;IAChC,sBAAsB;EACxB;;EAEA;IACE,0DAA0D;IAC1D,+BAA+B;;IAE/B;MACE,yEAAyE;MACzE,kEAAkE;IACpE;EACF;AACF;;AAEA,kDAAkD;AAClD;EACE,4BAA4B;EAC5B,8CAA8C;EAC9C;;;IAGE,aAAa;EACf;;EAEA;IACE,aAAa;IACb,yEAAyE;IACzE;;KAEC;EACH;;EAEA;IACE,qCAAqC;EACvC;AACF","file":"_dropdown.scss","sourcesContent":["/**\n * Dropdown ([role=\"list\"])\n */\n\n// Menu\ndetails[role=\"list\"],\nli[role=\"list\"] {\n  position: relative;\n}\n\ndetails[role=\"list\"] summary + ul,\nli[role=\"list\"] > ul {\n  display: flex;\n  z-index: 99;\n  position: absolute;\n  top: auto;\n  right: 0;\n  left: 0;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  border: var(--border-width) solid var(--dropdown-border-color);\n  border-radius: var(--border-radius);\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n  background-color: var(--dropdown-background-color);\n  box-shadow: var(--card-box-shadow);\n  color: var(--dropdown-color);\n  white-space: nowrap;\n\n  li {\n    width: 100%;\n    margin-bottom: 0;\n    padding: calc(var(--form-element-spacing-vertical) * 0.5)\n      var(--form-element-spacing-horizontal);\n    list-style: none;\n\n    &:first-of-type {\n      margin-top: calc(var(--form-element-spacing-vertical) * 0.5);\n    }\n\n    &:last-of-type {\n      margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);\n    }\n\n    a {\n      display: block;\n      margin: calc(var(--form-element-spacing-vertical) * -0.5)\n        calc(var(--form-element-spacing-horizontal) * -1);\n      padding: calc(var(--form-element-spacing-vertical) * 0.5)\n        var(--form-element-spacing-horizontal);\n      overflow: hidden;\n      color: var(--dropdown-color);\n      text-decoration: none;\n      text-overflow: ellipsis;\n\n      &:hover {\n        background-color: var(--dropdown-hover-background-color);\n      }\n    }\n  }\n}\n\n// Marker\ndetails[role=\"list\"] summary,\nli[role=\"list\"] > a {\n  &::after {\n    display: block;\n    width: 1rem;\n    height: calc(1rem * var(--line-height, 1.5));\n    margin-inline-start: 0.5rem;\n    float: right;\n    transform: rotate(0deg);\n    background-position: right center;\n    background-size: 1rem auto;\n    background-repeat: no-repeat;\n    content: \"\";\n  }\n}\n\n// Global dropdown only\ndetails[role=\"list\"] {\n  padding: 0;\n  border-bottom: none;\n\n  // Style <summary> as <select>\n  summary {\n    margin-bottom: 0;\n\n    &:not([role]) {\n      height: calc(\n        1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +\n          var(--border-width) * 2\n      );\n      padding: var(--form-element-spacing-vertical)\n        var(--form-element-spacing-horizontal);\n      border: var(--border-width) solid var(--form-element-border-color);\n      border-radius: var(--border-radius);\n      background-color: var(--form-element-background-color);\n      color: var(--form-element-placeholder-color);\n      line-height: inherit;\n      cursor: pointer;\n\n      @if $enable-transitions {\n        transition: background-color var(--transition),\n          border-color var(--transition), color var(--transition),\n          box-shadow var(--transition);\n      }\n\n      &:active,\n      &:focus {\n        border-color: var(--form-element-active-border-color);\n        background-color: var(--form-element-active-background-color);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);\n      }\n    }\n  }\n\n  // Close for details[role=\"list\"]\n  &[open] summary {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n\n    &::before {\n      display: block;\n      z-index: 1;\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background: none;\n      content: \"\";\n      cursor: default;\n    }\n  }\n}\n\n// All Dropdowns inside <nav>\nnav details[role=\"list\"] summary,\nnav li[role=\"list\"] a {\n  display: flex;\n  direction: ltr;\n}\n\nnav details[role=\"list\"] summary + ul,\nnav li[role=\"list\"] > ul {\n  min-width: fit-content;\n  border-radius: var(--border-radius);\n\n  li a {\n    border-radius: 0;\n  }\n}\n\n// Dropdowns inside <nav> as nested <details>\nnav details[role=\"list\"] {\n  summary,\n  summary:not([role]) {\n    height: auto;\n    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);\n  }\n\n  &[open] summary {\n    border-radius: var(--border-radius);\n  }\n\n  summary + ul {\n    margin-top: var(--outline-width);\n    margin-inline-start: 0;\n  }\n\n  summary[role=\"link\"] {\n    margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);\n    line-height: var(--line-height);\n\n    + ul {\n      margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));\n      margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);\n    }\n  }\n}\n\n// Dropdowns inside a <nav> without using <details>\nli[role=\"list\"] {\n  // Open on hover (for mobile)\n  // or on active/focus (for keyboard navigation)\n  &:hover > ul,\n  a:active ~ ul,\n  a:focus ~ ul {\n    display: flex;\n  }\n\n  > ul {\n    display: none;\n    margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));\n    margin-inline-start: calc(\n      var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)\n    );\n  }\n\n  > a::after {\n    background-image: var(--icon-chevron);\n  }\n}\n"]}