{"version":3,"file":"Dropdown.module.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      transition: transform 0.1s linear;\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}