spectrum-card.css

/*
Copyright 2023 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 {
    box-sizing: border-box;
    min-inline-size: var(
        --mod-card-minimum-width,
        var(--spectrum-card-minimum-width)
    );
    border: var(--mod-card-border-width, var(--spectrum-card-border-width))
        solid transparent;
    border-radius: var(
        --mod-card-corner-radius,
        var(--spectrum-card-corner-radius)
    );
    border-color: var(
        --highcontrast-card-border-color,
        var(--mod-card-border-color, var(--spectrum-card-border-color))
    );
    background-color: var(
        --highcontrast-card-background-color,
        var(--mod-card-background-color, var(--spectrum-card-background-color))
    );
    flex-direction: column;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inline-flex;
    position: relative;
}

:host:after,
:host:before {
    content: '';
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host:after {
    border-radius: var(
        --mod-card-corner-radius,
        var(--spectrum-card-corner-radius)
    );
    border: 0 solid #0000;
    margin-block-start: calc(
        var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            ) * -1
    );
    margin-inline-start: calc(
        var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            ) * -1
    );
    inset-inline-end: 0;
}

:host(:focus-visible) {
    outline: none;
}

:host(:focus-visible):after {
    border-width: var(
        --mod-card-focus-indicator-width,
        var(--spectrum-card-focus-indicator-width)
    );
    border-color: var(
        --mod-card-focus-indicator-color,
        var(--spectrum-card-focus-indicator-color)
    );
}

:host(:focus-visible) #cover-photo,
:host(:focus-visible) #preview {
    border-start-start-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            )
    );
    border-start-end-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            )
    );
}

:host([selected]) {
    border-color: var(
        --highcontrast-card-border-color-selected,
        var(
            --mod-card-border-color-selected,
            var(--spectrum-card-border-color-selected)
        )
    );
}

:host([selected]):before {
    background-color: rgba(
        var(
            --mod-card-selected-background-color-rgb,
            var(--spectrum-card-selected-background-color-rgb)
        ),
        var(
            --mod-card-selected-background-opacity,
            var(--spectrum-card-selected-background-opacity)
        )
    );
}

:host([drop-target]) {
    border-color: var(
        --highcontrast-card-border-color-selected,
        var(
            --mod-card-border-color-selected,
            var(--spectrum-card-border-color-selected)
        )
    );
    box-shadow: 0 0 0 1px
        var(
            --highcontrast-card-border-color-selected,
            var(
                --mod-card-border-color-selected,
                var(--spectrum-card-border-color-selected)
            )
        );
    background-color: var(
        --mod-card-background-color,
        var(--spectrum-card-background-color-quiet)
    );
}

:host([focused]) .actions,
:host([focused]) .checkbox-toggle,
:host([selected]) .actions,
:host([selected]) .checkbox-toggle,
:host(:focus) .actions,
:host(:focus) .checkbox-toggle {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.checkbox-toggle {
    visibility: hidden;
    box-shadow: var(
            --mod-card-actions-drop-shadow-x,
            var(--spectrum-card-actions-drop-shadow-x)
        )
        var(
            --mod-card-actions-drop-shadow-y,
            var(--spectrum-card-actions-drop-shadow-y)
        )
        var(
            --mod-card-actions-drop-shadow-blur,
            var(--spectrum-card-actions-drop-shadow-blur)
        )
        var(
            --mod-card-actions-drop-shadow-color,
            var(--spectrum-card-actions-drop-shadow-color)
        );
    inline-size: var(
        --mod-card-actions-size,
        var(--spectrum-card-actions-size)
    );
    block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size));
    border-radius: var(
        --mod-card-actions-border-radius,
        var(--spectrum-card-actions-border-radius)
    );
    background-color: rgba(
        var(
            --mod-card-actions-background-color-rgb,
            var(--spectrum-card-actions-background-color-rgb)
        ),
        var(
            --mod-card-actions-background-color-opacity,
            var(--spectrum-card-actions-background-color-opacity)
        )
    );
    pointer-events: auto;
    box-sizing: border-box;
    transition:
        transform 0.13s ease-in-out,
        opacity 0.13s ease-in-out,
        visibility 0s linear 0.13s;
    transition:
        transform
            var(
                --mod-overlay-animation-duration,
                var(--spectrum-animation-duration-100, 0.13s)
            )
            ease-in-out,
        opacity
            var(
                --mod-overlay-animation-duration,
                var(--spectrum-animation-duration-100, 0.13s)
            )
            ease-in-out,
        visibility 0s linear
            var(
                --mod-overlay-animation-duration,
                var(--spectrum-animation-duration-100, 0.13s)
            );
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    inset-block-start: calc(
        var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
    inset-inline-start: calc(
        var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
}

.actions {
    inset-block-start: var(
        --mod-card-actions-spacing,
        var(--spectrum-card-actions-spacing)
    );
    inset-inline-end: var(
        --mod-card-actions-spacing,
        var(--spectrum-card-actions-spacing)
    );
}

#cover-photo {
    block-size: var(
        --mod-card-preview-minimum-height,
        var(--spectrum-card-preview-minimum-height)
    );
    box-sizing: border-box;
    background-position: 50%;
    background-size: cover;
    background-color: var(
        --mod-card-preview-background-color,
        var(--spectrum-card-preview-background-color)
    );
    border-block-end-color: var(
        --mod-card-border-color,
        var(--spectrum-card-border-color)
    );
    border-start-start-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
    border-start-end-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

.spectrum-Divider {
    margin: 0;
}

.content {
    align-items: center;
    margin-block-start: var(
        --mod-card-content-margin-top,
        var(--spectrum-card-content-margin-top)
    );
    display: flex;
}

.body {
    padding-block-start: var(
        --mod-card-body-padding-block-start,
        var(
            --mod-card-title-padding-top,
            var(--spectrum-card-title-padding-top)
        )
    );
    padding-block-end: var(
        --mod-card-body-padding-block-end,
        calc(
            var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
                var(--mod-card-border-width, var(--spectrum-card-border-width))
        )
    );
    padding-inline-start: var(
        --mod-card-body-padding-inline-start,
        calc(
            var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
                var(--mod-card-border-width, var(--spectrum-card-border-width))
        )
    );
    padding-inline-end: var(
        --mod-card-body-padding-inline-end,
        calc(
            var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
                var(--mod-card-border-width, var(--spectrum-card-border-width))
        )
    );
}

#preview {
    color: var(
        --highcontrast-card-body-font-color,
        var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
    );
    border-start-start-radius: var(
        --mod-card-corner-radius,
        var(--spectrum-card-corner-radius)
    );
    border-start-end-radius: var(
        --mod-card-corner-radius,
        var(--spectrum-card-corner-radius)
    );
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.title {
    font-family: var(
        --mod-card-title-font-family,
        var(--spectrum-card-title-font-family)
    );
    font-size: var(
        --mod-card-title-font-size,
        var(--spectrum-card-title-font-size)
    );
    font-weight: var(
        --mod-card-title-font-weight,
        var(--spectrum-card-title-font-weight)
    );
    font-style: var(
        --mod-card-title-font-style,
        var(--spectrum-card-title-font-style)
    );
    line-height: var(
        --mod-card-title-line-height,
        var(--spectrum-card-title-line-height)
    );
    padding-inline-end: var(
        --mod-card-title-padding-right,
        var(--spectrum-card-title-padding-right)
    );
}

.subtitle,
.title {
    color: var(
        --highcontrast-card-title-font-color,
        var(--mod-card-title-font-color, var(--spectrum-card-title-font-color))
    );
}

.subtitle {
    text-transform: none;
}

.subtitle,
.subtitle + ::slotted([slot='description']):before {
    padding-inline-end: var(
        --mod-card-subtitle-padding-right,
        var(--spectrum-card-subtitle-padding-right)
    );
}

.subtitle + ::slotted([slot='description']):before {
    content: '•';
}

::slotted([slot='description']) {
    font-family: var(
        --mod-card-body-font-family,
        var(--spectrum-card-body-font-family)
    );
    font-size: var(
        --mod-card-body-font-size,
        var(--spectrum-card-body-font-size)
    );
    font-weight: var(
        --mod-card-body-font-weight,
        var(--spectrum-card-body-font-weight)
    );
    font-style: var(
        --mod-card-body-font-style,
        var(--spectrum-card-body-font-style)
    );
}

::slotted([slot='description']),
::slotted([slot='footer']) {
    line-height: var(
        --mod-card-body-line-height,
        var(--spectrum-card-body-line-height)
    );
    color: var(
        --highcontrast-card-body-font-color,
        var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
    );
}

::slotted([slot='footer']) {
    border-block-start: var(
            --mod-card-border-width,
            var(--spectrum-card-border-width)
        )
        solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
    margin-block-start: var(
        --mod-card-footer-margin-block-start,
        calc(
            (
                    var(
                            --mod-card-body-spacing,
                            var(--spectrum-card-body-spacing)
                        ) -
                        var(
                            --mod-card-content-margin-bottom,
                            var(--spectrum-card-content-margin-bottom)
                        )
                ) * -1
        )
    );
    margin-inline-start: var(
        --mod-card-footer-margin-inline-start,
        var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))
    );
    margin-inline-end: var(
        --mod-card-footer-margin-inline-end,
        var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))
    );
    padding-block-start: var(
        --mod-card-footer-padding-block-start,
        var(
            --mod-card-footer-margin-top,
            var(--spectrum-card-footer-padding-top)
        )
    );
    padding-block-end: var(
        --mod-card-footer-padding-block-end,
        calc(
            var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
                var(--mod-card-border-width, var(--spectrum-card-border-width))
        )
    );
}

.header {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.action-button {
    z-index: 1;
    justify-content: flex-end;
    align-self: center;
    display: flex;
}

:host([variant='quiet']) #preview {
    border: var(
            --mod-card-focus-indicator-width,
            var(--spectrum-card-focus-indicator-width)
        )
        solid transparent;
}

:host([variant='quiet'][focused]):after,
:host([variant='quiet']:focus):after {
    border-width: 0;
}

:host([variant='quiet'][focused]) #preview:after,
:host([variant='quiet']:focus) #preview:after {
    border-color: var(
        --mod-card-focus-indicator-color,
        var(--spectrum-card-focus-indicator-color)
    );
}

:host([variant='quiet'][selected]) #preview {
    border: var(
            --mod-card-preview-border-width-selected,
            var(
                --mod-card-preview-border-width,
                var(--spectrum-card-preview-border-width-selected)
            )
        )
        solid;
    border-color: var(
        --highcontrast-card-border-color-selected,
        var(
            --mod-card-border-color-selected,
            var(--spectrum-card-border-color-selected)
        )
    );
}

:host([variant='gallery']),
:host([variant='quiet']) {
    --spectrum-card-content-margin-top: var(
        --mod-card-content-margin-top-quiet,
        var(--spectrum-card-content-margin-top-quiet)
    );
    --spectrum-card-minimum-width: var(
        --mod-card-minimum-width-quiet,
        var(--spectrum-card-minimum-width-quiet)
    );
    block-size: 100%;
    min-inline-size: var(
        --mod-card-minimum-width,
        var(--spectrum-card-minimum-width)
    );
    background-color: initial;
    border-width: 0;
    border-color: #0000;
    border-radius: 0;
    overflow: visible;
}

:host([variant='gallery']):before,
:host([variant='quiet']):before {
    display: none;
}

:host([variant='gallery']) #preview,
:host([variant='quiet']) #preview {
    border-radius: var(
        --mod-card-corner-radius,
        var(--spectrum-card-corner-radius)
    );
    background-color: var(
        --mod-card-preview-background-color,
        var(
            --mod-card-background-color,
            var(--spectrum-card-preview-background-color)
        )
    );
    min-block-size: var(
        --mod-card-preview-minimum-height,
        var(--spectrum-card-preview-minimum-height)
    );
    inline-size: 100%;
    box-sizing: border-box;
    transition: background-color
        var(
            --mod-card-animation-duration,
            var(
                --mod-animation-duration-100,
                var(--spectrum-animation-duration-100)
            )
        );
    flex: 1;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

:host([variant='gallery']) #preview:after,
:host([variant='gallery']) #preview:before,
:host([variant='quiet']) #preview:after,
:host([variant='quiet']) #preview:before {
    content: '';
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host([variant='gallery']) #preview:after,
:host([variant='quiet']) #preview:after {
    border-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) +
            var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            )
    );
    border: 0 solid #0000;
    margin-block-start: calc(
        var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            ) * -1
    );
    margin-inline-start: calc(
        var(
                --mod-card-focus-indicator-width,
                var(--spectrum-card-focus-indicator-width)
            ) * -1
    );
    inset-inline-end: 0;
}

:host([variant='gallery'][drop-target]),
:host([variant='quiet'][drop-target]) {
    background-color: initial;
    box-shadow: none;
    border-color: #0000;
}

:host([variant='gallery'][drop-target]) #preview,
:host([variant='quiet'][drop-target]) #preview {
    background-color: var(
        --mod-card-preview-background-color,
        var(
            --mod-card-background-color,
            var(--spectrum-card-preview-background-color)
        )
    );
    transition: none;
}

:host([variant='gallery'][drop-target]) #preview:before,
:host([variant='quiet'][drop-target]) #preview:before {
    border-color: var(
        --mod-card-focus-indicator-color,
        var(--spectrum-card-focus-indicator-color)
    );
    box-shadow: 0 0 0 1px
        var(
            --mod-card-focus-indicator-color,
            var(--spectrum-card-focus-indicator-color)
        );
}

:host([variant='gallery'][selected]) #preview:before,
:host([variant='quiet'][selected]) #preview:before {
    background-color: rgba(
        var(
            --mod-card-selected-background-color-rgb,
            var(--spectrum-card-selected-background-color-rgb)
        ),
        var(
            --mod-card-selected-background-opacity,
            var(--spectrum-card-selected-background-opacity)
        )
    );
}

:host([variant='gallery']) .body,
:host([variant='quiet']) .body {
    margin-block-start: var(
        --mod-card-content-margin-top,
        var(--spectrum-card-content-margin-top)
    );
    padding: 0;
}

:host([variant='gallery']) ::slotted([slot='footer']),
:host([variant='quiet']) ::slotted([slot='footer']) {
    margin-inline: 0;
}

:host([horizontal]) {
    flex-direction: row;
}

@media (hover: hover) {
    :host(:hover) {
        border-color: var(
            --highcontrast-card-border-color-hover,
            var(
                --mod-card-border-color-hover,
                var(--spectrum-card-border-color-hover)
            )
        );
    }

    :host(:hover) .actions,
    :host(:hover) .checkbox-toggle {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

    :host([variant='gallery']:hover),
    :host([variant='quiet']:hover) {
        border-color: #0000;
    }

    :host([variant='gallery']:hover) #preview,
    :host([variant='quiet']:hover) #preview {
        background-color: var(
            --mod-card-preview-background-color-hover,
            var(
                --mod-card-background-color-hover,
                var(--spectrum-card-preview-background-color-hover)
            )
        );
    }

    :host([horizontal]:hover) #preview {
        border-color: var(
            --mod-card-border-color-hover,
            var(--spectrum-card-border-color-hover)
        );
    }
}

:host([horizontal]) #preview {
    min-block-size: 0;
    padding: var(
        --mod-card-horizontal-preview-padding,
        var(--spectrum-card-horizontal-preview-padding)
    );
    background-color: var(
        --mod-card-preview-background-color,
        var(--spectrum-card-preview-background-color)
    );
    border-color: var(
        --mod-card-border-color,
        var(--spectrum-card-border-color)
    );
    border-start-start-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: calc(
        var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
            var(--mod-card-border-width, var(--spectrum-card-border-width))
    );
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

:host([horizontal]) .content,
:host([horizontal]) .header {
    block-size: auto;
    margin-block-start: 0;
}

:host([horizontal]) .content {
    margin-block-end: 0;
}

:host([horizontal]) .title {
    padding-inline-end: 0;
}

:host([horizontal]) .body {
    padding-block: 0;
    padding-inline: var(
        --mod-card-horizontal-body-padding,
        var(--spectrum-card-horizontal-body-padding)
    );
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    display: flex;
}

:host([variant='gallery']) {
    min-inline-size: 0;
}

:host([variant='gallery']) #preview {
    border-radius: 0;
    padding: 0;
}