UNPKG

@spectrum-web-components/styles

Version:

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org) powered web component library of patterns built ontop of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are mad

1,571 lines (1,569 loc) 86.2 kB
/* 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. */ /* stylelint-disable */ :host, :root { font-family: var( --spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base) ); font-size: var( --spectrum-alias-font-size-default, var(--spectrum-global-dimension-font-size-100) ); } .spectrum:lang(ar) { font-family: var( --spectrum-alias-font-family-ar, myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif ); } .spectrum:lang(he) { font-family: var( --spectrum-alias-font-family-he, myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif ); } .spectrum:lang(zh-Hans) { font-family: var( --spectrum-alias-font-family-zhhans, adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif' ); } .spectrum:lang(zh), .spectrum:lang(zh-Hant) { font-family: var( --spectrum-alias-font-family-zh, adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif' ); } .spectrum:lang(ko) { font-family: var( --spectrum-alias-font-family-ko, adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif' ); } .spectrum:lang(ja) { font-family: var( --spectrum-alias-font-family-ja, adobe-clean-han-japanese, source-han-japanese, 'Yu Gothic', '\\30E1 \\30A4 \\30EA \\30AA', '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic', 'sans-serif' ); } .spectrum-Heading--sizeXXXL { font-size: var( --spectrum-heading-xxxl-text-size, var(--spectrum-alias-heading-xxxl-text-size) ); font-weight: var( --spectrum-heading-xxxl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-xxxl-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXXL { font-size: var( --spectrum-heading-xxl-text-size, var(--spectrum-alias-heading-xxl-text-size) ); font-weight: var( --spectrum-heading-xxl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-xxl-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXL { font-size: var( --spectrum-heading-xl-text-size, var(--spectrum-alias-heading-xl-text-size) ); font-weight: var( --spectrum-heading-xl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-xl-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeL { font-size: var( --spectrum-heading-l-text-size, var(--spectrum-alias-heading-l-text-size) ); font-weight: var( --spectrum-heading-l-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-l-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeM { font-size: var( --spectrum-heading-m-text-size, var(--spectrum-alias-heading-m-text-size) ); font-weight: var( --spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-m-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeS { font-size: var( --spectrum-heading-s-text-size, var(--spectrum-alias-heading-s-text-size) ); font-weight: var( --spectrum-heading-s-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-s-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXS { font-size: var( --spectrum-heading-xs-text-size, var(--spectrum-alias-heading-xs-text-size) ); font-weight: var( --spectrum-heading-xs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-xs-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXXS { font-size: var( --spectrum-heading-xxs-text-size, var(--spectrum-alias-heading-xxs-text-size) ); font-weight: var( --spectrum-heading-xxs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-xxs-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( --spectrum-heading-xxs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-heading-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading { font-family: var( --spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family) ); font-weight: var( --spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); } .spectrum-Heading .spectrum-Heading-emphasis, .spectrum-Heading em { font-style: var( --spectrum-heading-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { font-weight: var( --spectrum-heading-m-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); } .spectrum-Heading--serif { font-family: var( --spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family) ); } .spectrum-Heading--heavy { font-weight: var( --spectrum-heading-heavy-m-text-font-weight, var(--spectrum-global-font-weight-black) ); } .spectrum-Heading--heavy .spectrum-Heading-emphasis, .spectrum-Heading--heavy em { font-style: var( --spectrum-heading-heavy-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { font-weight: var( --spectrum-heading-heavy-m-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); } .spectrum-Heading--light { font-weight: var( --spectrum-heading-light-m-emphasis-text-font-weight, var(--spectrum-global-font-weight-light) ); } .spectrum-Heading--light .spectrum-Heading-emphasis, .spectrum-Heading--light em { font-style: var( --spectrum-heading-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { font-weight: var( --spectrum-heading-light-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold) ); } .spectrum-Body--sizeXXXL { font-size: var( --spectrum-body-xxxl-text-size, var(--spectrum-global-dimension-font-size-600) ); font-weight: var( --spectrum-body-xxxl-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-xxxl-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXXL { font-size: var( --spectrum-body-xxl-text-size, var(--spectrum-global-dimension-font-size-500) ); font-weight: var( --spectrum-body-xxl-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-xxl-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXL { font-size: var( --spectrum-body-xl-text-size, var(--spectrum-global-dimension-font-size-400) ); font-weight: var( --spectrum-body-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-xl-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeL { font-size: var( --spectrum-body-l-text-size, var(--spectrum-global-dimension-font-size-300) ); font-weight: var( --spectrum-body-l-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-l-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeM { font-size: var( --spectrum-body-m-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( --spectrum-body-m-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-m-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeS { font-size: var( --spectrum-body-s-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( --spectrum-body-s-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-s-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXS { font-size: var( --spectrum-body-xs-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( --spectrum-body-xs-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: var( --spectrum-body-xs-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-body-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); text-transform: var(--spectrum-body-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body { font-family: var( --spectrum-body-m-text-font-family, var(--spectrum-alias-body-text-font-family) ); } .spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { font-weight: var( --spectrum-body-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold) ); } .spectrum-Body .spectrum-Body-emphasis, .spectrum-Body em { font-style: var( --spectrum-body-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Body--serif { font-family: var( --spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family) ); } .spectrum-Detail { font-family: var( --spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family) ); } .spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { font-weight: var( --spectrum-detail-m-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); } .spectrum-Detail .spectrum-Detail-emphasis, .spectrum-Detail em { font-style: var( --spectrum-detail-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Detail--light { font-style: var( --spectrum-detail-light-m-text-font-style, var(--spectrum-global-font-style-regular) ); font-weight: var( --spectrum-detail-light-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight-light) ); } .spectrum-Detail--serif { font-family: var( --spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family) ); } .spectrum-Detail--sizeXL { font-size: var( --spectrum-detail-xl-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( --spectrum-detail-xl-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-xl-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-xl-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeXL em { font-size: var( --spectrum-detail-xl-emphasis-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( --spectrum-detail-xl-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-xl-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-xl-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); letter-spacing: var( --spectrum-detail-xl-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var( --spectrum-detail-xl-emphasis-text-transform, uppercase ); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeXL strong { font-size: var( --spectrum-detail-xl-strong-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( --spectrum-detail-xl-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); line-height: var( --spectrum-detail-xl-strong-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-xl-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-xl-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL { font-size: var( --spectrum-detail-l-text-size, var(--spectrum-global-dimension-font-size-100) ); font-weight: var( --spectrum-detail-l-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-l-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-l-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL em { font-size: var( --spectrum-detail-l-emphasis-text-size, var(--spectrum-global-dimension-font-size-100) ); font-weight: var( --spectrum-detail-l-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-l-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-l-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); letter-spacing: var( --spectrum-detail-l-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-l-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL strong { font-size: var( --spectrum-detail-l-strong-text-size, var(--spectrum-global-dimension-font-size-100) ); font-weight: var( --spectrum-detail-l-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); line-height: var( --spectrum-detail-l-strong-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-l-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-l-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM { font-size: var( --spectrum-detail-m-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( --spectrum-detail-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-m-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-m-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM em { font-size: var( --spectrum-detail-m-emphasis-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( --spectrum-detail-m-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-m-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); letter-spacing: var( --spectrum-detail-m-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-m-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM strong { font-size: var( --spectrum-detail-m-strong-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( --spectrum-detail-m-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); line-height: var( --spectrum-detail-m-strong-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-m-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-m-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS { font-size: var( --spectrum-detail-s-text-size, var(--spectrum-global-dimension-font-size-50) ); font-weight: var( --spectrum-detail-s-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-s-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-s-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS em { font-size: var( --spectrum-detail-s-emphasis-text-size, var(--spectrum-global-dimension-font-size-50) ); font-weight: var( --spectrum-detail-s-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight) ); line-height: var( --spectrum-detail-s-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-s-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); letter-spacing: var( --spectrum-detail-s-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-s-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS strong { font-size: var( --spectrum-detail-s-strong-text-size, var(--spectrum-global-dimension-font-size-50) ); font-weight: var( --spectrum-detail-s-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); line-height: var( --spectrum-detail-s-strong-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( --spectrum-detail-s-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-detail-s-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Code { font-family: var( --spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family) ); } .spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { font-weight: var( --spectrum-code-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold) ); } .spectrum-Code .spectrum-Code-emphasis, .spectrum-Code em { font-style: var( --spectrum-code-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic) ); } .spectrum-Code--serif { font-family: var( --spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family) ); } .spectrum-Code--sizeXL { font-size: var( --spectrum-code-xl-text-size, var(--spectrum-global-dimension-font-size-400) ); font-weight: var( --spectrum-code-xl-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( --spectrum-code-xl-text-line-height, var(--spectrum-alias-code-text-line-height) ); font-style: var( --spectrum-code-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-code-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); margin-top: 0; margin-bottom: 0; font-family: var( --spectrum-code-xl-text-font-family, var(--spectrum-alias-code-text-font-family) ); } .spectrum-Code--sizeL { font-size: var( --spectrum-code-l-text-size, var(--spectrum-global-dimension-font-size-300) ); font-weight: var( --spectrum-code-l-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( --spectrum-code-l-text-line-height, var(--spectrum-alias-code-text-line-height) ); font-style: var( --spectrum-code-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-code-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); margin-top: 0; margin-bottom: 0; font-family: var( --spectrum-code-l-text-font-family, var(--spectrum-alias-code-text-font-family) ); } .spectrum-Code--sizeM { font-size: var( --spectrum-code-m-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( --spectrum-code-m-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( --spectrum-code-m-text-line-height, var(--spectrum-alias-code-text-line-height) ); font-style: var( --spectrum-code-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-code-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); margin-top: 0; margin-bottom: 0; font-family: var( --spectrum-code-m-text-font-family, var(--spectrum-alias-code-text-font-family) ); } .spectrum-Code--sizeS { font-size: var( --spectrum-code-s-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( --spectrum-code-s-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( --spectrum-code-s-text-line-height, var(--spectrum-alias-code-text-line-height) ); font-style: var( --spectrum-code-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-code-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); margin-top: 0; margin-bottom: 0; font-family: var( --spectrum-code-s-text-font-family, var(--spectrum-alias-code-text-font-family) ); } .spectrum-Code--sizeXS { font-size: var( --spectrum-code-xs-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( --spectrum-code-xs-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( --spectrum-code-xs-text-line-height, var(--spectrum-alias-code-text-line-height) ); font-style: var( --spectrum-code-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-code-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); margin-top: 0; margin-bottom: 0; font-family: var( --spectrum-code-xs-text-font-family, var(--spectrum-alias-code-text-font-family) ); } .spectrum-Typography .spectrum-Heading--sizeXXXL { margin-top: var( --spectrum-heading-xxxl-margin-top, var(--spectrum-alias-heading-xxxl-margin-top) ); margin-bottom: var( --spectrum-heading-xxxl-margin-bottom, var(--spectrum-global-dimension-size-130) ); } .spectrum-Typography .spectrum-Heading--sizeXXL { margin-top: var( --spectrum-heading-xxl-margin-top, var(--spectrum-alias-heading-xxl-margin-top) ); margin-bottom: var( --spectrum-heading-xxl-margin-bottom, var(--spectrum-global-dimension-size-125) ); } .spectrum-Typography .spectrum-Heading--sizeXL { margin-top: var( --spectrum-heading-xl-margin-top, var(--spectrum-alias-heading-xl-margin-top) ); margin-bottom: var( --spectrum-heading-xl-margin-bottom, var(--spectrum-global-dimension-size-115) ); } .spectrum-Typography .spectrum-Heading--sizeL { margin-top: var( --spectrum-heading-l-margin-top, var(--spectrum-alias-heading-l-margin-top) ); margin-bottom: var( --spectrum-heading-l-margin-bottom, var(--spectrum-global-dimension-size-85) ); } .spectrum-Typography .spectrum-Heading--sizeM { margin-top: var( --spectrum-heading-m-margin-top, var(--spectrum-alias-heading-m-margin-top) ); margin-bottom: var( --spectrum-heading-m-margin-bottom, var(--spectrum-global-dimension-size-75) ); } .spectrum-Typography .spectrum-Heading--sizeS { margin-top: var( --spectrum-heading-s-margin-top, var(--spectrum-alias-heading-s-margin-top) ); margin-bottom: var( --spectrum-heading-s-margin-bottom, var(--spectrum-global-dimension-size-65) ); } .spectrum-Typography .spectrum-Heading--sizeXS { margin-top: var( --spectrum-heading-xs-margin-top, var(--spectrum-alias-heading-xs-margin-top) ); margin-bottom: var( --spectrum-heading-xs-margin-bottom, var(--spectrum-global-dimension-size-50) ); } .spectrum-Typography .spectrum-Heading--sizeXXS { margin-top: var( --spectrum-heading-xxs-margin-top, var(--spectrum-alias-heading-xxs-margin-top) ); margin-bottom: var( --spectrum-heading-xxs-margin-bottom, var(--spectrum-global-dimension-size-40) ); } .spectrum-Typography .spectrum-Body--sizeXXXL { margin-top: var(--spectrum-body-xxxl-margin-top, 0); margin-bottom: var( --spectrum-body-xxxl-margin-bottom, var(--spectrum-global-dimension-size-400) ); } .spectrum-Typography .spectrum-Body--sizeXXL { margin-top: var(--spectrum-body-xxl-margin-top, 0); margin-bottom: var( --spectrum-body-xxl-margin-bottom, var(--spectrum-global-dimension-size-300) ); } .spectrum-Typography .spectrum-Body--sizeXL { margin-top: var(--spectrum-body-xl-margin-top, 0); margin-bottom: var( --spectrum-body-xl-margin-bottom, var(--spectrum-global-dimension-size-200) ); } .spectrum-Typography .spectrum-Body--sizeL { margin-top: var(--spectrum-body-l-margin-top, 0); margin-bottom: var( --spectrum-body-l-margin-bottom, var(--spectrum-global-dimension-size-160) ); } .spectrum-Typography .spectrum-Body--sizeM { margin-top: var(--spectrum-body-m-margin-top, 0); margin-bottom: var( --spectrum-body-m-margin-bottom, var(--spectrum-global-dimension-size-150) ); } .spectrum-Typography .spectrum-Body--sizeS { margin-top: var(--spectrum-body-s-margin-top, 0); margin-bottom: var( --spectrum-body-s-margin-bottom, var(--spectrum-global-dimension-size-125) ); } .spectrum-Typography .spectrum-Body--sizeXS { margin-top: var(--spectrum-body-xs-margin-top, 0); margin-bottom: var( --spectrum-body-xs-margin-bottom, var(--spectrum-global-dimension-size-115) ); } .spectrum:lang(ja) .spectrum-Heading--sizeXXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXXL { font-size: var( --spectrum-heading-han-xxxl-text-size, var(--spectrum-alias-heading-xxxl-text-size) ); font-weight: var( --spectrum-heading-han-xxxl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-xxxl-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXL { font-size: var( --spectrum-heading-han-xxl-text-size, var(--spectrum-alias-heading-han-xxl-text-size) ); font-weight: var( --spectrum-heading-han-xxl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-xxl-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXL, .spectrum:lang(ko) .spectrum-Heading--sizeXL, .spectrum:lang(zh) .spectrum-Heading--sizeXL { font-size: var( --spectrum-heading-han-xl-text-size, var(--spectrum-alias-heading-han-xl-text-size) ); font-weight: var( --spectrum-heading-han-xl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-xl-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeL, .spectrum:lang(ko) .spectrum-Heading--sizeL, .spectrum:lang(zh) .spectrum-Heading--sizeL { font-size: var( --spectrum-heading-han-l-text-size, var(--spectrum-alias-heading-han-l-text-size) ); font-weight: var( --spectrum-heading-han-l-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-l-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeM, .spectrum:lang(ko) .spectrum-Heading--sizeM, .spectrum:lang(zh) .spectrum-Heading--sizeM { font-size: var( --spectrum-heading-han-m-text-size, var(--spectrum-alias-heading-han-m-text-size) ); font-weight: var( --spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-m-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeS, .spectrum:lang(ko) .spectrum-Heading--sizeS, .spectrum:lang(zh) .spectrum-Heading--sizeS { font-size: var( --spectrum-heading-han-s-text-size, var(--spectrum-alias-heading-s-text-size) ); font-weight: var( --spectrum-heading-han-s-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-s-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXS, .spectrum:lang(ko) .spectrum-Heading--sizeXS, .spectrum:lang(zh) .spectrum-Heading--sizeXS { font-size: var( --spectrum-heading-han-xs-text-size, var(--spectrum-alias-heading-xs-text-size) ); font-weight: var( --spectrum-heading-han-xs-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-xs-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXXS, .spectrum:lang(ko) .spectrum-Heading--sizeXXS, .spectrum:lang(zh) .spectrum-Heading--sizeXXS { font-size: var( --spectrum-heading-han-xxs-text-size, var(--spectrum-alias-heading-xxs-text-size) ); font-weight: var( --spectrum-heading-han-xxs-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( --spectrum-heading-han-xxs-text-line-height, var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( --spectrum-heading-han-xxs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-heading-han-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-heading-han-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--heavy, .spectrum:lang(ko) .spectrum-Heading--heavy, .spectrum:lang(zh) .spectrum-Heading--heavy { font-weight: var( --spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); } .spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--emphasis, .spectrum:lang(ja) .spectrum-Heading--heavy em, .spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--emphasis, .spectrum:lang(ko) .spectrum-Heading--heavy em, .spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--emphasis, .spectrum:lang(zh) .spectrum-Heading--heavy em { font-style: var( --spectrum-heading-han-heavy-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); font-weight: var( --spectrum-heading-han-heavy-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-heavy-emphasis) ); } .spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--strong, .spectrum:lang(ja) .spectrum-Heading--heavy strong, .spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--strong, .spectrum:lang(ko) .spectrum-Heading--heavy strong, .spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--strong, .spectrum:lang(zh) .spectrum-Heading--heavy strong { font-style: var( --spectrum-heading-heavy-m-strong-text-font-style, var(--spectrum-global-font-style-regular) ); font-weight: var( --spectrum-heading-heavy-m-strong-text-font-weight, var(--spectrum-global-font-weight-black) ); } .spectrum:lang(ja) .spectrum-Heading--light, .spectrum:lang(ko) .spectrum-Heading--light, .spectrum:lang(zh) .spectrum-Heading--light { font-weight: var( --spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular) ); } .spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--emphasis, .spectrum:lang(ja) .spectrum-Heading--light em, .spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--emphasis, .spectrum:lang(ko) .spectrum-Heading--light em, .spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--emphasis, .spectrum:lang(zh) .spectrum-Heading--light em { font-style: var( --spectrum-heading-han-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); font-weight: var( --spectrum-heading-han-light-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-light-emphasis) ); } .spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--strong, .spectrum:lang(ja) .spectrum-Heading--light strong, .spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--strong, .spectrum:lang(ko) .spectrum-Heading--light strong, .spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--strong, .spectrum:lang(zh) .spectrum-Heading--light strong { font-style: var( --spectrum-heading-han-light-m-strong-text-font-style, var(--spectrum-global-font-style-regular) ); font-weight: var( --spectrum-heading-han-light-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold) ); } .spectrum:lang(ja) .spectrum-Body--sizeXXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXXL { font-size: var( --spectrum-body-han-xxxl-text-size, var(--spectrum-global-dimension-font-size-600) ); font-weight: var( --spectrum-body-han-xxxl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( --spectrum-body-han-xxxl-text-line-height, var(--spectrum-alias-han-body-text-line-height) ); font-style: var( --spectrum-body-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-han-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-body-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXL { font-size: var( --spectrum-body-han-xxl-text-size, var(--spectrum-global-dimension-font-size-500) ); font-weight: var( --spectrum-body-han-xxl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( --spectrum-body-han-xxl-text-line-height, var(--spectrum-alias-han-body-text-line-height) ); font-style: var( --spectrum-body-han-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( --spectrum-body-han-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); text-transform: var(--spectrum-body-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeXL, .spectrum:lang(ko) .spectrum-Body--sizeXL, .spectrum:lang(zh) .spectrum-Body--sizeXL { font-size: var( --spectrum-body-han-xl-text-size, var(--spectrum-global-dimension-font-size-400) ); font-weight: var( --spectrum-body-han-xl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( --spectrum-body-han-xl-text-line-height, var(--spectrum-alias-han-body-text-line-height) ); font-style: var( --spectrum-body-han-xl-text-font-style, var(--spectrum-global-fon