@spectrum-web-components/card 1.0.1-alpha.67 → 1.0.1-color-testing

package/src/spectrum-card.css

@@ -1,843 +0,0 @@
-/* stylelint-disable */ /* 
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-
-THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    /* .spectrum-Card */
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    min-width: var(
-        --spectrum-card-min-width,
-        var(--spectrum-global-dimension-size-3000)
-    );
-    border: var(
-            --spectrum-card-border-size,
-            var(--spectrum-alias-border-size-thin)
-        )
-        solid transparent;
-    border-radius: var(
-        --spectrum-card-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-    text-decoration: none;
-}
-:host(:focus) {
-    /* .spectrum-Card:focus */
-    outline: none;
-}
-:host([focused]) .actions,
-:host([focused]) .quickActions,
-:host([selected]) .actions,
-:host([selected]) .quickActions,
-:host(:focus) .actions,
-:host(:focus) .quickActions,
-:host(:hover) .actions,
-:host(:hover) .quickActions {
-    /* .spectrum-Card.is-focused .spectrum-Card-actions,
-   * .spectrum-Card.is-focused .spectrum-Card-quickActions,
-   * .spectrum-Card.is-selected .spectrum-Card-actions,
-   * .spectrum-Card.is-selected .spectrum-Card-quickActions,
-   * .spectrum-Card:focus .spectrum-Card-actions,
-   * .spectrum-Card:focus .spectrum-Card-quickActions,
-   * .spectrum-Card:hover .spectrum-Card-actions,
-   * .spectrum-Card:hover .spectrum-Card-quickActions */
-    visibility: visible;
-    opacity: 1;
-    pointer-events: all;
-}
-:host([dir='ltr']) .actions {
-    /* [dir=ltr] .spectrum-Card-actions */
-    right: var(
-        --spectrum-card-actions-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-}
-:host([dir='rtl']) .actions {
-    /* [dir=rtl] .spectrum-Card-actions */
-    left: var(
-        --spectrum-card-actions-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-}
-.actions {
-    /* .spectrum-Card-actions */
-    position: absolute;
-    top: var(
-        --spectrum-card-actions-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-    height: var(
-        --spectrum-quickactions-height,
-        var(--spectrum-global-dimension-size-500)
-    );
-    visibility: hidden;
-}
-:host([dir='ltr']) .quickActions {
-    /* [dir=ltr] .spectrum-Card-quickActions */
-    left: var(
-        --spectrum-card-checkbox-margin,
-        var(--spectrum-global-dimension-size-200)
-    );
-}
-:host([dir='rtl']) .quickActions {
-    /* [dir=rtl] .spectrum-Card-quickActions */
-    right: var(
-        --spectrum-card-checkbox-margin,
-        var(--spectrum-global-dimension-size-200)
-    );
-}
-.quickActions {
-    /* .spectrum-Card-quickActions */
-    position: absolute;
-    top: var(
-        --spectrum-card-checkbox-margin,
-        var(--spectrum-global-dimension-size-200)
-    );
-    width: var(
-        --spectrum-quickactions-height,
-        var(--spectrum-global-dimension-size-500)
-    );
-    height: var(
-        --spectrum-quickactions-height,
-        var(--spectrum-global-dimension-size-500)
-    );
-    visibility: hidden;
-}
-:host([dir='ltr']) .quickActions .checkbox,
-:host([dir='rtl']) .quickActions .checkbox {
-    /* [dir=ltr] .spectrum-Card-quickActions .spectrum-Checkbox,
-   * [dir=rtl] .spectrum-Card-quickActions .spectrum-Checkbox */
-    margin: 0;
-}
-#cover-photo {
-    /* .spectrum-Card-coverPhoto */
-    height: var(
-        --spectrum-card-coverphoto-height,
-        var(--spectrum-global-dimension-size-1700)
-    );
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: var(
-            --spectrum-card-coverphoto-border-bottom-size,
-            var(--spectrum-alias-border-size-thin)
-        )
-        solid transparent;
-    border-top-left-radius: calc(
-        var(
-                --spectrum-card-border-radius,
-                var(--spectrum-alias-border-radius-regular)
-            ) - 1px
-    );
-    border-top-right-radius: calc(
-        var(
-                --spectrum-card-border-radius,
-                var(--spectrum-alias-border-radius-regular)
-            ) - 1px
-    );
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    background-size: cover;
-    background-position: 50%;
-}
-:host([dir='ltr']) .body {
-    /* [dir=ltr] .spectrum-Card-body */
-    padding-right: var(
-        --spectrum-card-body-padding-right,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='rtl']) .body {
-    /* [dir=rtl] .spectrum-Card-body */
-    padding-left: var(
-        --spectrum-card-body-padding-right,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='ltr']) .body {
-    /* [dir=ltr] .spectrum-Card-body */
-    padding-left: var(
-        --spectrum-card-body-padding-left,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='rtl']) .body {
-    /* [dir=rtl] .spectrum-Card-body */
-    padding-right: var(
-        --spectrum-card-body-padding-left,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-.body {
-    /* .spectrum-Card-body */
-    padding-top: var(
-        --spectrum-card-body-padding-top,
-        var(--spectrum-global-dimension-size-250)
-    );
-    padding-bottom: var(
-        --spectrum-card-body-padding-bottom,
-        var(--spectrum-global-dimension-size-250)
-    );
-}
-.body:last-child {
-    /* .spectrum-Card-body:last-child */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(
-        --spectrum-card-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-    border-bottom-left-radius: var(
-        --spectrum-card-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-}
-#preview {
-    /* .spectrum-Card-preview */
-    overflow: hidden;
-    border-top-left-radius: calc(
-        var(
-                --spectrum-card-border-radius,
-                var(--spectrum-alias-border-radius-regular)
-            ) - 1px
-    );
-    border-top-right-radius: calc(
-        var(
-                --spectrum-card-border-radius,
-                var(--spectrum-alias-border-radius-regular)
-            ) - 1px
-    );
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-.header {
-    /* .spectrum-Card-header */
-    height: var(
-        --spectrum-card-body-header-height,
-        var(--spectrum-global-dimension-size-225)
-    );
-}
-.content {
-    /* .spectrum-Card-content */
-    display: flex;
-    height: var(
-        --spectrum-card-body-content-height,
-        var(--spectrum-global-dimension-size-175)
-    );
-    margin-top: var(
-        --spectrum-card-body-content-margin-top,
-        var(--spectrum-global-dimension-size-75)
-    );
-}
-:host([dir='ltr']) .title {
-    /* [dir=ltr] .spectrum-Card-title */
-    padding-right: var(
-        --spectrum-card-title-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-:host([dir='rtl']) .title {
-    /* [dir=rtl] .spectrum-Card-title */
-    padding-left: var(
-        --spectrum-card-title-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-.title {
-    /* .spectrum-Card-title */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-:host([dir='ltr']) .subtitle {
-    /* [dir=ltr] .spectrum-Card-subtitle */
-    padding-right: var(
-        --spectrum-card-subtitle-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-:host([dir='rtl']) .subtitle {
-    /* [dir=rtl] .spectrum-Card-subtitle */
-    padding-left: var(
-        --spectrum-card-subtitle-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-::slotted([slot='description']) {
-    /* .spectrum-Card-description */
-    font-size: var(
-        --spectrum-card-subtitle-text-size,
-        var(--spectrum-global-dimension-font-size-50)
-    );
-}
-:host([dir='ltr']) .subtitle + ::slotted([slot='description']):before {
-    /* [dir=ltr] .spectrum-Card-subtitle+.spectrum-Card-description:before */
-    padding-right: var(
-        --spectrum-card-subtitle-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-:host([dir='rtl']) .subtitle + ::slotted([slot='description']):before {
-    /* [dir=rtl] .spectrum-Card-subtitle+.spectrum-Card-description:before */
-    padding-left: var(
-        --spectrum-card-subtitle-padding-right,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-.subtitle + ::slotted([slot='description']):before {
-    /* .spectrum-Card-subtitle+.spectrum-Card-description:before */
-    content: '•';
-}
-:host([dir='ltr']) ::slotted([slot='footer']) {
-    /* [dir=ltr] .spectrum-Card-footer */
-    margin-right: var(
-        --spectrum-card-body-padding-right,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='rtl']) ::slotted([slot='footer']) {
-    /* [dir=rtl] .spectrum-Card-footer */
-    margin-left: var(
-        --spectrum-card-body-padding-right,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='ltr']) ::slotted([slot='footer']) {
-    /* [dir=ltr] .spectrum-Card-footer */
-    margin-left: var(
-        --spectrum-card-body-padding-left,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-:host([dir='rtl']) ::slotted([slot='footer']) {
-    /* [dir=rtl] .spectrum-Card-footer */
-    margin-right: var(
-        --spectrum-card-body-padding-left,
-        var(--spectrum-global-dimension-size-300)
-    );
-}
-::slotted([slot='footer']) {
-    /* .spectrum-Card-footer */
-    padding-top: var(
-        --spectrum-card-footer-padding-top,
-        var(--spectrum-global-dimension-size-175)
-    );
-    padding-bottom: var(
-        --spectrum-card-body-padding-bottom,
-        var(--spectrum-global-dimension-size-250)
-    );
-    border-top: var(
-            --spectrum-card-footer-border-top-size,
-            var(--spectrum-global-dimension-size-10)
-        )
-        solid;
-}
-.header {
-    /* .spectrum-Card-header */
-    display: flex;
-    align-items: baseline;
-}
-.actionButton {
-    /* .spectrum-Card-actionButton */
-    flex: 1;
-    align-self: center;
-    display: flex;
-    justify-content: flex-end;
-}
-:host([variant='quiet']) #preview {
-    /* .spectrum-Card--quiet .spectrum-Card-preview */
-    min-height: var(
-        --spectrum-card-quiet-min-size,
-        var(--spectrum-global-dimension-size-1700)
-    );
-}
-:host([variant='gallery']),
-:host([variant='quiet']) {
-    /* .spectrum-Card--gallery,
-   * .spectrum-Card--quiet */
-    width: 100%;
-    height: 100%;
-    min-width: var(
-        --spectrum-card-quiet-min-size,
-        var(--spectrum-global-dimension-size-1700)
-    );
-    border-width: 0;
-    border-radius: 0;
-    overflow: visible;
-}
-:host([variant='gallery']) #preview,
-:host([variant='quiet']) #preview {
-    /* .spectrum-Card--gallery .spectrum-Card-preview,
-   * .spectrum-Card--quiet .spectrum-Card-preview */
-    width: 100%;
-    flex: 1;
-    padding: var(
-        --spectrum-card-quiet-preview-padding,
-        var(--spectrum-global-dimension-size-250)
-    );
-    margin: 0 auto;
-    box-sizing: border-box;
-    border-radius: var(
-        --spectrum-card-quiet-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-    position: relative;
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 0.13s);
-    overflow: visible;
-}
-:host([dir='ltr'][variant='gallery']) #preview:before,
-:host([dir='ltr'][variant='quiet']) #preview:before {
-    /* [dir=ltr] .spectrum-Card--gallery .spectrum-Card-preview:before,
-   * [dir=ltr] .spectrum-Card--quiet .spectrum-Card-preview:before */
-    left: 0;
-}
-:host([dir='rtl'][variant='gallery']) #preview:before,
-:host([dir='rtl'][variant='quiet']) #preview:before {
-    /* [dir=rtl] .spectrum-Card--gallery .spectrum-Card-preview:before,
-   * [dir=rtl] .spectrum-Card--quiet .spectrum-Card-preview:before */
-    right: 0;
-}
-:host([variant='gallery']) #preview:before,
-:host([variant='quiet']) #preview:before {
-    /* .spectrum-Card--gallery .spectrum-Card-preview:before,
-   * .spectrum-Card--quiet .spectrum-Card-preview:before */
-    content: '';
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    border-radius: inherit;
-    border: var(
-            --spectrum-card-quiet-border-size,
-            var(--spectrum-alias-border-size-thin)
-        )
-        solid transparent;
-}
-:host([variant='gallery'][drop-target]) #preview,
-:host([variant='quiet'][drop-target]) #preview {
-    /* .spectrum-Card--gallery.is-drop-target .spectrum-Card-preview,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview */
-    transition: none;
-}
-:host([variant='gallery']) .header,
-:host([variant='quiet']) .header {
-    /* .spectrum-Card--gallery .spectrum-Card-header,
-   * .spectrum-Card--quiet .spectrum-Card-header */
-    height: var(
-        --spectrum-card-quiet-body-header-height,
-        var(--spectrum-global-dimension-size-225)
-    );
-    margin-top: var(
-        --spectrum-card-quiet-body-header-margin-top,
-        var(--spectrum-global-dimension-size-175)
-    );
-}
-:host([variant='gallery']) .body,
-:host([variant='quiet']) .body {
-    /* .spectrum-Card--gallery .spectrum-Card-body,
-   * .spectrum-Card--quiet .spectrum-Card-body */
-    padding: 0;
-}
-:host([small]) {
-    /* .spectrum-Card--small */
-    min-width: var(
-        --spectrum-card-quiet-small-min-size,
-        var(--spectrum-global-dimension-size-900)
-    );
-}
-:host([dir='ltr'][small]) .quickActions {
-    /* [dir=ltr] .spectrum-Card--small .spectrum-Card-quickActions */
-    left: var(
-        --spectrum-card-quiet-small-checkbox-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-}
-:host([dir='rtl'][small]) .quickActions {
-    /* [dir=rtl] .spectrum-Card--small .spectrum-Card-quickActions */
-    right: var(
-        --spectrum-card-quiet-small-checkbox-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-}
-:host([small]) .quickActions {
-    /* .spectrum-Card--small .spectrum-Card-quickActions */
-    top: var(
-        --spectrum-card-quiet-small-checkbox-margin,
-        var(--spectrum-global-dimension-size-125)
-    );
-}
-:host([small]) #preview {
-    /* .spectrum-Card--small .spectrum-Card-preview */
-    padding: var(
-        --spectrum-card-quiet-small-preview-padding,
-        var(--spectrum-global-dimension-size-150)
-    );
-    min-height: var(
-        --spectrum-card-quiet-small-min-size,
-        var(--spectrum-global-dimension-size-900)
-    );
-}
-:host([small]) .header {
-    /* .spectrum-Card--small .spectrum-Card-header */
-    margin-top: var(
-        --spectrum-card-quiet-small-body-margin-top,
-        var(--spectrum-global-dimension-size-100)
-    );
-    height: var(
-        --spectrum-card-quiet-small-body-header-height,
-        var(--spectrum-global-dimension-size-150)
-    );
-}
-:host([small]) .title {
-    /* .spectrum-Card--small .spectrum-Card-title */
-    font-size: var(
-        --spectrum-card-quiet-small-title-text-size,
-        var(--spectrum-global-dimension-font-size-100)
-    );
-}
-:host([horizontal]) {
-    /* .spectrum-Card--horizontal */
-    flex-direction: row;
-}
-:host([dir='ltr'][horizontal]) #preview {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-top-left-radius: var(
-        --spectrum-card-quiet-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-}
-:host([dir='rtl'][horizontal]) #preview {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-top-right-radius: var(
-        --spectrum-card-quiet-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-}
-:host([dir='ltr'][horizontal]) #preview {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-top-right-radius: 0;
-}
-:host([dir='rtl'][horizontal]) #preview {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-top-left-radius: 0;
-}
-:host([dir='ltr'][horizontal]) #preview {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-bottom-left-radius: var(
-        --spectrum-card-quiet-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-}
-:host([dir='rtl'][horizontal]) #preview {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-bottom-right-radius: var(
-        --spectrum-card-quiet-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-    );
-}
-:host([dir='ltr'][horizontal]) #preview {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-bottom-right-radius: 0;
-}
-:host([dir='rtl'][horizontal]) #preview {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-bottom-left-radius: 0;
-}
-:host([dir='ltr'][horizontal]) #preview {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-right: var(
-            --spectrum-card-border-size,
-            var(--spectrum-alias-border-size-thin)
-        )
-        solid transparent;
-}
-:host([dir='rtl'][horizontal]) #preview {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */
-    border-left: var(
-            --spectrum-card-border-size,
-            var(--spectrum-alias-border-size-thin)
-        )
-        solid transparent;
-}
-:host([horizontal]) #preview {
-    /* .spectrum-Card--horizontal .spectrum-Card-preview */
-    flex-shrink: 0;
-    min-height: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spectrum-global-dimension-size-175);
-}
-:host([horizontal]) .content,
-:host([horizontal]) .header {
-    /* .spectrum-Card--horizontal .spectrum-Card-content,
-   * .spectrum-Card--horizontal .spectrum-Card-header */
-    margin-top: 0;
-    height: auto;
-}
-:host([dir='ltr'][horizontal]) .title {
-    /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-title */
-    padding-right: 0;
-}
-:host([dir='rtl'][horizontal]) .title {
-    /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-title */
-    padding-left: 0;
-}
-:host([horizontal]) .body {
-    /* .spectrum-Card--horizontal .spectrum-Card-body */
-    flex-shrink: 0;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: var(--spectrum-global-dimension-size-200);
-    padding-right: var(--spectrum-global-dimension-size-200);
-}
-:host([variant='gallery']) {
-    /* .spectrum-Card--gallery */
-    min-width: 0;
-}
-:host([variant='gallery']) #preview {
-    /* .spectrum-Card--gallery .spectrum-Card-preview */
-    padding: 0;
-    border-radius: 0;
-}
-:host {
-    /* .spectrum-Card */
-    border-color: var(
-        --spectrum-card-border-color,
-        var(--spectrum-global-color-gray-200)
-    );
-    background-color: var(
-        --spectrum-card-background-color,
-        var(--spectrum-global-color-gray-50)
-    );
-}
-:host(:hover) {
-    /* .spectrum-Card:hover */
-    border-color: var(
-        --spectrum-card-border-color-hover,
-        var(--spectrum-global-color-gray-400)
-    );
-}
-:host(:focus-visible),
-:host([drop-target]),
-:host([selected]) {
-    /* .spectrum-Card.focus-ring,
-   * .spectrum-Card.is-drop-target,
-   * .spectrum-Card.is-selected */
-    border-color: var(
-        --spectrum-card-border-color-key-focus,
-        var(--spectrum-alias-border-color-focus)
-    );
-    box-shadow: 0 0 0 1px
-        var(
-            --spectrum-card-border-color-key-focus,
-            var(--spectrum-alias-border-color-focus)
-        );
-}
-:host([drop-target]) {
-    /* .spectrum-Card.is-drop-target */
-    background-color: var(--spectrum-alias-highlight-selected);
-}
-::slotted([slot='description']),
-.subtitle {
-    /* .spectrum-Card-description,
-   * .spectrum-Card .spectrum-Card-subtitle */
-    color: var(
-        --spectrum-card-description-text-color,
-        var(--spectrum-global-color-gray-700)
-    );
-}
-#cover-photo {
-    /* .spectrum-Card-coverPhoto */
-    background-color: var(
-        --spectrum-card-coverphoto-background-color,
-        var(--spectrum-global-color-gray-200)
-    );
-    border-bottom-color: var(
-        --spectrum-card-coverphoto-border-color,
-        var(--spectrum-global-color-gray-200)
-    );
-}
-::slotted([slot='footer']) {
-    /* .spectrum-Card-footer */
-    border-color: var(
-        --spectrum-card-border-color,
-        var(--spectrum-global-color-gray-200)
-    );
-}
-:host([variant='gallery']),
-:host([variant='quiet']) {
-    /* .spectrum-Card--gallery,
-   * .spectrum-Card--quiet */
-    border-color: transparent;
-    background-color: initial;
-}
-:host([variant='gallery']) #preview,
-:host([variant='quiet']) #preview {
-    /* .spectrum-Card--gallery .spectrum-Card-preview,
-   * .spectrum-Card--quiet .spectrum-Card-preview */
-    background-color: var(
-        --spectrum-card-quiet-preview-background-color,
-        var(--spectrum-global-color-gray-200)
-    );
-}
-:host([variant='gallery']:hover),
-:host([variant='quiet']:hover) {
-    /* .spectrum-Card--gallery:hover,
-   * .spectrum-Card--quiet:hover */
-    border-color: transparent;
-}
-:host([variant='gallery']:hover) #preview,
-:host([variant='quiet']:hover) #preview {
-    /* .spectrum-Card--gallery:hover .spectrum-Card-preview,
-   * .spectrum-Card--quiet:hover .spectrum-Card-preview */
-    background-color: var(
-        --spectrum-card-quiet-preview-background-color-hover,
-        var(--spectrum-global-color-gray-300)
-    );
-}
-:host([variant='gallery']:focus-visible),
-:host([variant='gallery'][selected]),
-:host([variant='quiet']:focus-visible),
-:host([variant='quiet'][selected]) {
-    /* .spectrum-Card--gallery.focus-ring,
-   * .spectrum-Card--gallery.is-selected,
-   * .spectrum-Card--quiet.focus-ring,
-   * .spectrum-Card--quiet.is-selected */
-    border-color: transparent;
-    box-shadow: none;
-}
-:host([variant='gallery']:focus-visible) #preview,
-:host([variant='gallery'][selected]) #preview,
-:host([variant='quiet']:focus-visible) #preview,
-:host([variant='quiet'][selected]) #preview {
-    /* .spectrum-Card--gallery.focus-ring .spectrum-Card-preview,
-   * .spectrum-Card--gallery.is-selected .spectrum-Card-preview,
-   * .spectrum-Card--quiet.focus-ring .spectrum-Card-preview,
-   * .spectrum-Card--quiet.is-selected .spectrum-Card-preview */
-    background-color: var(
-        --spectrum-card-quiet-preview-background-color,
-        var(--spectrum-global-color-gray-200)
-    );
-}
-:host([variant='gallery']:focus-visible) #preview:before,
-:host([variant='gallery'][selected]) #preview:before,
-:host([variant='quiet']:focus-visible) #preview:before,
-:host([variant='quiet'][selected]) #preview:before {
-    /* .spectrum-Card--gallery.focus-ring .spectrum-Card-preview:before,
-   * .spectrum-Card--gallery.is-selected .spectrum-Card-preview:before,
-   * .spectrum-Card--quiet.focus-ring .spectrum-Card-preview:before,
-   * .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before */
-    border-color: var(
-        --spectrum-card-quiet-border-color-selected,
-        var(--spectrum-global-color-blue-500)
-    );
-    box-shadow: 0 0 0 1px
-        var(
-            --spectrum-card-quiet-border-color-selected,
-            var(--spectrum-global-color-blue-500)
-        );
-}
-:host([variant='gallery'][drop-target]),
-:host([variant='quiet'][drop-target]) {
-    /* .spectrum-Card--gallery.is-drop-target,
-   * .spectrum-Card--quiet.is-drop-target */
-    border-color: transparent;
-    background-color: initial;
-    box-shadow: none;
-}
-:host([variant='gallery'][drop-target]) #preview,
-:host([variant='quiet'][drop-target]) #preview {
-    /* .spectrum-Card--gallery.is-drop-target .spectrum-Card-preview,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview */
-    background-color: var(--spectrum-alias-highlight-selected);
-}
-:host([variant='gallery'][drop-target]) #preview:before,
-:host([variant='quiet'][drop-target]) #preview:before {
-    /* .spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before */
-    border-color: var(
-        --spectrum-card-quiet-border-color-selected,
-        var(--spectrum-global-color-blue-500)
-    );
-    box-shadow: 0 0 0 1px
-        var(
-            --spectrum-card-quiet-border-color-selected,
-            var(--spectrum-global-color-blue-500)
-        );
-}
-:host([variant='gallery'][drop-target]) .spectrum-Asset-fileBackground,
-:host([variant='gallery'][drop-target]) .spectrum-Asset-folderBackground,
-:host([variant='quiet'][drop-target]) .spectrum-Asset-fileBackground,
-:host([variant='quiet'][drop-target]) .spectrum-Asset-folderBackground {
-    /* .spectrum-Card--gallery.is-drop-target .spectrum-Asset-fileBackground,
-   * .spectrum-Card--gallery.is-drop-target .spectrum-Asset-folderBackground,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Asset-fileBackground,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Asset-folderBackground */
-    fill: var(--spectrum-alias-highlight-selected);
-}
-:host([variant='gallery'][drop-target]) .spectrum-Asset-fileOutline,
-:host([variant='gallery'][drop-target]) .spectrum-Asset-folderOutline,
-:host([variant='quiet'][drop-target]) .spectrum-Asset-fileOutline,
-:host([variant='quiet'][drop-target]) .spectrum-Asset-folderOutline {
-    /* .spectrum-Card--gallery.is-drop-target .spectrum-Asset-fileOutline,
-   * .spectrum-Card--gallery.is-drop-target .spectrum-Asset-folderOutline,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Asset-fileOutline,
-   * .spectrum-Card--quiet.is-drop-target .spectrum-Asset-folderOutline */
-    fill: var(
-        --spectrum-card-quiet-border-color-selected,
-        var(--spectrum-global-color-blue-500)
-    );
-}
-:host([variant='gallery']) .title,
-:host([variant='quiet']) .title {
-    /* .spectrum-Card--gallery .spectrum-Card-title,
-   * .spectrum-Card--quiet .spectrum-Card-title */
-    color: var(
-        --spectrum-card-quiet-title-text-color,
-        var(--spectrum-global-color-gray-800)
-    );
-}
-:host([variant='gallery']) .subtitle,
-:host([variant='quiet']) .subtitle {
-    /* .spectrum-Card--gallery .spectrum-Card-subtitle,
-   * .spectrum-Card--quiet .spectrum-Card-subtitle */
-    color: var(
-        --spectrum-card-quiet-subtitle-text-color,
-        var(--spectrum-global-color-gray-700)
-    );
-}
-:host([horizontal]:hover) #preview {
-    /* .spectrum-Card--horizontal:hover .spectrum-Card-preview */
-    border-color: var(
-        --spectrum-card-border-color-hover,
-        var(--spectrum-global-color-gray-400)
-    );
-}
-:host([horizontal]) #preview {
-    /* .spectrum-Card--horizontal .spectrum-Card-preview */
-    background-color: var(
-        --spectrum-card-quiet-preview-background-color,
-        var(--spectrum-global-color-gray-200)
-    );
-    border-color: var(
-        --spectrum-card-border-color,
-        var(--spectrum-global-color-gray-200)
-    );
-}