)
- */
-article {
- margin-bottom: var(--pico-block-spacing-vertical);
- padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
- border-radius: var(--pico-border-radius);
- background: var(--pico-card-background-color);
- box-shadow: var(--pico-card-box-shadow);
-}
-article > header,
-article > footer {
- margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
- margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
- padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
- background-color: var(--pico-card-sectioning-background-color);
-}
-article > header {
- margin-top: calc(var(--pico-block-spacing-vertical) * -1);
- margin-bottom: var(--pico-block-spacing-vertical);
- border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
- border-top-right-radius: var(--pico-border-radius);
- border-top-left-radius: var(--pico-border-radius);
-}
-article > footer {
- margin-top: var(--pico-block-spacing-vertical);
- margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
- border-top: var(--pico-border-width) solid var(--pico-card-border-color);
- border-bottom-right-radius: var(--pico-border-radius);
- border-bottom-left-radius: var(--pico-border-radius);
-}
-
-/**
- * Dropdown (details.dropdown)
- */
-details.dropdown {
- position: relative;
- border-bottom: none;
-}
-details.dropdown > summary::after,
-details.dropdown > button::after,
-details.dropdown > a::after {
- display: block;
- width: 1rem;
- height: calc(1rem * var(--pico-line-height, 1.5));
- margin-inline-start: 0.25rem;
- float: right;
- transform: rotate(0deg) translateX(0.2rem);
- background-image: var(--pico-icon-chevron);
- background-position: right center;
- background-size: 1rem auto;
- background-repeat: no-repeat;
- content: "";
-}
-
-nav details.dropdown {
- margin-bottom: 0;
-}
-
-details.dropdown > summary:not([role]) {
- height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
- padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
- border: var(--pico-border-width) solid var(--pico-form-element-border-color);
- border-radius: var(--pico-border-radius);
- background-color: var(--pico-form-element-background-color);
- color: var(--pico-form-element-placeholder-color);
- line-height: inherit;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
-}
-details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
- border-color: var(--pico-form-element-active-border-color);
- background-color: var(--pico-form-element-active-background-color);
-}
-details.dropdown > summary:not([role]):focus {
- box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
-}
-details.dropdown > summary:not([role]):focus-visible {
- outline: none;
-}
-details.dropdown > summary:not([role])[aria-invalid=false] {
- --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
- --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
- --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
-}
-details.dropdown > summary:not([role])[aria-invalid=true] {
- --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
- --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
- --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
-}
-
-nav details.dropdown {
- display: inline;
- margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary::after {
- transform: rotate(0deg) translateX(0rem);
-}
-nav details.dropdown > summary:not([role]) {
- height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
- padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
- box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
-details.dropdown > summary + ul {
- display: flex;
- z-index: 99;
- position: absolute;
- left: 0;
- flex-direction: column;
- width: 100%;
- min-width: -moz-fit-content;
- min-width: fit-content;
- margin: 0;
- margin-top: var(--pico-outline-width);
- padding: 0;
- border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
- border-radius: var(--pico-border-radius);
- background-color: var(--pico-dropdown-background-color);
- box-shadow: var(--pico-dropdown-box-shadow);
- color: var(--pico-dropdown-color);
- white-space: nowrap;
- opacity: 0;
- transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
-}
-details.dropdown > summary + ul[dir=rtl] {
- right: 0;
- left: auto;
-}
-details.dropdown > summary + ul li {
- width: 100%;
- margin-bottom: 0;
- padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
- list-style: none;
-}
-details.dropdown > summary + ul li:first-of-type {
- margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details.dropdown > summary + ul li:last-of-type {
- margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details.dropdown > summary + ul li a {
- display: block;
- margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
- padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
- overflow: hidden;
- border-radius: 0;
- color: var(--pico-dropdown-color);
- text-decoration: none;
- text-overflow: ellipsis;
-}
-details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
- background-color: var(--pico-dropdown-hover-background-color);
-}
-details.dropdown > summary + ul li label {
- width: 100%;
-}
-details.dropdown > summary + ul li:has(label):hover {
- background-color: var(--pico-dropdown-hover-background-color);
-}
-
-details.dropdown[open] > summary {
- margin-bottom: 0;
-}
-
-details.dropdown[open] > summary + ul {
- transform: scaleY(1);
- opacity: 1;
- transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
-details.dropdown[open] > summary::before {
- display: block;
- z-index: 1;
- position: fixed;
- width: 100vw;
- height: 100vh;
- inset: 0;
- background: none;
- content: "";
- cursor: default;
-}
-
-label > details.dropdown {
- margin-top: calc(var(--pico-spacing) * 0.25);
-}
-
-/**
- * Group ([role="group"], [role="search"])
- */
-[role=search],
-[role=group] {
- display: inline-flex;
- position: relative;
- width: 100%;
- margin-bottom: var(--pico-spacing);
- border-radius: var(--pico-border-radius);
- box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
- vertical-align: middle;
- transition: box-shadow var(--pico-transition);
-}
-[role=search] > *,
-[role=search] input:not([type=checkbox], [type=radio]),
-[role=search] select,
-[role=group] > *,
-[role=group] input:not([type=checkbox], [type=radio]),
-[role=group] select {
- position: relative;
- flex: 1 1 auto;
- margin-bottom: 0;
-}
-[role=search] > *:not(:first-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=search] select:not(:first-child),
-[role=group] > *:not(:first-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
- margin-left: 0;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-}
-[role=search] > *:not(:last-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
-[role=search] select:not(:last-child),
-[role=group] > *:not(:last-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
-[role=group] select:not(:last-child) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-[role=search] > *:focus,
-[role=search] input:not([type=checkbox], [type=radio]):focus,
-[role=search] select:focus,
-[role=group] > *:focus,
-[role=group] input:not([type=checkbox], [type=radio]):focus,
-[role=group] select:focus {
- z-index: 2;
-}
-[role=search] button:not(:first-child),
-[role=search] [type=submit]:not(:first-child),
-[role=search] [type=reset]:not(:first-child),
-[role=search] [type=button]:not(:first-child),
-[role=search] [role=button]:not(:first-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=search] select:not(:first-child),
-[role=group] button:not(:first-child),
-[role=group] [type=submit]:not(:first-child),
-[role=group] [type=reset]:not(:first-child),
-[role=group] [type=button]:not(:first-child),
-[role=group] [role=button]:not(:first-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
- margin-left: calc(var(--pico-border-width) * -1);
-}
-[role=search] button,
-[role=search] [type=submit],
-[role=search] [type=reset],
-[role=search] [type=button],
-[role=search] [role=button],
-[role=group] button,
-[role=group] [type=submit],
-[role=group] [type=reset],
-[role=group] [type=button],
-[role=group] [role=button] {
- width: auto;
-}
-@supports selector(:has(*)) {
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
- --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
- }
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
- border-color: transparent;
- }
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
- --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
- }
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
- --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
- --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
- }
- [role=search] button:focus,
- [role=search] [type=submit]:focus,
- [role=search] [type=reset]:focus,
- [role=search] [type=button]:focus,
- [role=search] [role=button]:focus,
- [role=group] button:focus,
- [role=group] [type=submit]:focus,
- [role=group] [type=reset]:focus,
- [role=group] [type=button]:focus,
- [role=group] [role=button]:focus {
- box-shadow: none;
- }
-}
-
-[role=search] > *:first-child {
- border-top-left-radius: 5rem;
- border-bottom-left-radius: 5rem;
-}
-[role=search] > *:last-child {
- border-top-right-radius: 5rem;
- border-bottom-right-radius: 5rem;
-}
-
-/**
- * Loading ([aria-busy=true])
- */
-[aria-busy=true]:not(input, select, textarea, html, form) {
- white-space: nowrap;
-}
-[aria-busy=true]:not(input, select, textarea, html, form)::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- background-image: var(--pico-icon-loading);
- background-size: 1em auto;
- background-repeat: no-repeat;
- content: "";
- vertical-align: -0.125em;
-}
-[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
- margin-inline-end: calc(var(--pico-spacing) * 0.5);
-}
-[aria-busy=true]:not(input, select, textarea, html, form):empty {
- text-align: center;
-}
-
-button[aria-busy=true],
-[type=submit][aria-busy=true],
-[type=button][aria-busy=true],
-[type=reset][aria-busy=true],
-[role=button][aria-busy=true],
-a[aria-busy=true] {
- pointer-events: none;
-}
-
-/**
- * Modal (
@@ -41,15 +45,6 @@