* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*/
/*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*/
/*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*/
/*
* # row
*
* the `row` class is the only allowed child of all grid variants
*/
/*
* span and offset definitons
*/
.Rqt2SZ,
.JQ6r1S {
margin-left: calc((100%) / 12 * (1));
}
.aMzBAl,
.pizluM {
margin-left: calc((100%) / 12 * (2));
}
.bAjxtD,
.B6gXjR {
max-width: calc((100%) / 12 * (3));
flex-basis: calc((100%) / 12 * (3));
}
.CJcD6d,
.PWlc1w {
margin-left: calc((100%) / 12 * (3));
}
.WrXGl0,
.dx3LsG {
max-width: calc((100%) / 12 * (4));
flex-basis: calc((100%) / 12 * (4));
}
.FGI_CE,
.l4CM49 {
margin-left: calc((100%) / 12 * (4));
}
.NsqWJj,
.lBKn4j {
max-width: calc((100%) / 12 * (5));
flex-basis: calc((100%) / 12 * (5));
}
.CpXB54,
.j-nCXp {
margin-left: calc((100%) / 12 * (5));
}
._75qWlu,
.cYylcv {
max-width: calc((100%) / 12 * (6));
flex-basis: calc((100%) / 12 * (6));
}
.Z2BT9E,
.u4DQ3E {
margin-left: calc((100%) / 12 * (6));
}
.z3uAcL,
.k_fRlP {
max-width: calc((100%) / 12 * (7));
flex-basis: calc((100%) / 12 * (7));
}
.UujphY,
.BEpwRJ {
margin-left: calc((100%) / 12 * (7));
}
.dK0x7s,
.ncgdK7 {
max-width: calc((100%) / 12 * (8));
flex-basis: calc((100%) / 12 * (8));
}
.qFNm8Y,
.P5TOh6 {
margin-left: calc((100%) / 12 * (8));
}
.h81Jxx,
.WdovGw {
margin-left: calc((100%) / 12 * (9));
}
.tOLvFZ,
.SYCkVH {
margin-left: calc((100%) / 12 * (10));
}
.qTUUGY,
.J6GO3e {
max-width: calc((100%) / 12 * (11));
flex-basis: calc((100%) / 12 * (11));
}
.m1lJlp,
.CrXvzY {
margin-left: calc((100%) / 12 * (11));
}
._2hG8pA,
.VHXqc_ {
max-width: calc((100%) / 12 * (12));
flex-basis: calc((100%) / 12 * (12));
}
.kCm5dU,
.-JubFk {
margin-left: calc((100%) / 12 * (12));
}
._6UQQ4I,
.JvSsKY {
margin-left: 0;
}
/*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*/
/*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*/
.to4dXk {
right: var(--grid-margin)
}
/*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*/
/*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*/
/*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*/
/*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*/
._0SjFSS {
margin-left: var(--grid-margin)
}
.lpFfS1 {
margin-right: var(--grid-margin)
}.VPz8ua {
right: 100%;
}
.V7PD-q {
width: 100vw;
}
.OXFOVc {
font-weight: normal !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
user-select: none;
}
/* TODO(icon-size): Remove deprecated style when releasing next major */
.H3jvU7 {
font-size: var(--font-size-h4-desktop);
}
.IrHeXP {
font-size: var(--font-size-j2-desktop);
}
:root {
--flyout-tooltip-max-width: 320px;
}
/*
* HACK: displayTable can be removed once we can switch to transform positioning
* in popper. Waiting for a fix for https://github.com/popperjs/popper-core/issues/1300
*/
.-vpr3F {
max-width: var(--flyout-tooltip-max-width);
opacity: 0;
}
.uaY0Ti {
background-color: inherit;
}
.uaY0Ti:after {
content: "";
position: absolute;
border-width: 9px;
box-shadow: var(--border-width-m) calc(-1 * var(--border-width-m)) 0 0
var(--color-border-primary);
border-style: var(--border-style-solid);
border-color: transparent transparent transparent transparent;
background-color: inherit;
}
[data-popper-placement^="bottom"] .uaY0Ti {
top: 0
}
[data-popper-placement^="bottom"] .uaY0Ti:after {
top: -6px;
transform: translateX(-50%) rotate(-45deg);
}
[data-popper-placement^="top"] .uaY0Ti {
bottom: 0
}
[data-popper-placement^="top"] .uaY0Ti:after {
top: -12px;
transform: translateX(-50%) rotate(-225deg);
}
[data-popper-placement^="left"] .uaY0Ti {
right: 0
}
[data-popper-placement^="left"] .uaY0Ti:after {
right: -6px;
transform: translateY(-50%) rotate(45deg);
}
[data-popper-placement^="right"] .uaY0Ti {
left: 0
}
[data-popper-placement^="right"] .uaY0Ti:after {
left: -6px;
transform: translateY(-50%) rotate(225deg);
}
/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/
.uMfNEX {
display: none;
}
.f3sRh_ {
flex: 0 0 auto
}
.qgmfJX {
flex: none
}
.S3xARh {
flex-basis: 100%
}
.uw6-xa {
flex-basis: 50%
}
.H7wB_N {
flex-basis: 33.33%
}
.ucHw-u {
flex-basis: 25%
}
.pBHThj {
flex-basis: 20%
}
.T9JDKu {
flex-basis: 16.66%
}
.Fyc-Q5 {
flex-basis: 12.5%
}
.FtY3RM {
flex-direction: column-reverse
}
.LCyMwB {
flex-direction: row-reverse
}
.vSgP6A {
align-items: baseline
}
.Og5LU9 {
align-items: stretch
}
.x49tCb {
align-self: auto
}
._9pPvxq {
align-self: baseline
}
.DgFgr2 {
align-self: flex-end
}
.Q1UH4S {
align-self: flex-start
}
._6IBKsp {
align-self: stretch
}
.YX1pgj {
justify-content: flex-end
}
.nxVrja {
justify-content: space-around
}
.-WVFzW {
justify-content: space-evenly
}
.CjmYZY {
align-content: center
}
.fJsIZa {
align-content: stretch
}
._4J-sIE {
align-content: flex-end
}
.MVQw54 {
align-content: flex-start
}
.TUpw1A {
align-content: space-around
}
._9qBSus {
align-content: space-between
}
.vIBB8L {
align-content: space-evenly
}
.uFyXNt {
order: 0
}
._8XhtEX {
order: 1
}
.CginYM {
order: 2
}._70RdFc {
flex-wrap: wrap-reverse;
}
.JwGOCV {
max-width: 80%;
}
.w5w9i_ {
display: none
}
.zN9KaA {
display: inline
}
.m_NGmo {
display: table
}
.SV3gZh {
display: inline-table
}
.WFxibF {
display: table-header-group
}
.VlUEkA {
display: table-footer-group
}
.W4DXC7 {
display: table-row
}
.eTmQ2Y {
display: table-row-group
}
.gDjHHK {
display: table-cell
}
:root {
--countdown-default-flex-basis-mobile: 28px;
--countdown-default-flex-basis-phablet: 40px;
--countdown-default-flex-basis-tablet: 48px;
--countdown-default-flex-basis-desktop: 64px;
}
.eSdSDN {
flex-basis: var(--countdown-default-flex-basis-mobile)
}
.Cfn73M {
flex-basis: var(--countdown-default-flex-basis-tablet)
}
._4UKJhq {
flex-basis: var(--countdown-default-flex-basis-mobile)
}.vH6gla {
max-height: 24px;
}.Dc4Ftm {
right: 50%;
}.oFYU5q {
left: 50%;
}.X9n9TI {
-webkit-user-select: none;
user-select: none;
}.nEuFYE {
-webkit-user-select: all;
user-select: all;
}._0hYDp4 {
max-width: 24px;
}
.NKsIVT {
padding-top: 336px
}
.a1N5dM {
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
}
/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*/
.BjsYqB {
cursor: unset !important;
}
.OkplN6 {
cursor: default !important;
}
._7HodJm {
box-shadow: inset 0 0 0px 2px #eb0037;
}
.IvrHht {
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.ja2E95 {
-webkit-line-clamp: 2;
line-clamp: 2;
}
.u-kVXO {
-webkit-hyphens: auto;
hyphens: auto;
}
/************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************/
/* Rules for Nested level 0 */
:not(._) .awiwSm,
:not(._) .rlur1y,
:not(._) .QUEh3M {
display: none;
}
:not(._) .CcF5fU {
display: inline-block;
}
._ZDS_DM_ENABLED_ .CcF5fU {
display: inline-block
}
._ZDS_DM_ENABLED_ .awiwSm {
display: none
}
/* Rules for Nested level 1 */
:not(._)
:is(._D, ._ML, ._MD)
.CcF5fU,
:not(._)
:is(._DD, ._L, ._ML, ._MD)
.awiwSm,
:not(._)
:is(._DD, ._L, ._D, ._MD)
.rlur1y,
:not(._)
:is(._DD, ._L, ._D, ._ML)
.QUEh3M {
display: none;
}
:not(._) :is(._DD, ._L) .CcF5fU,
:not(._) ._D .awiwSm,
:not(._) ._ML .rlur1y,
:not(._) ._MD .QUEh3M {
display: inline-block;
}
._ZDS_DM_ENABLED_ ._DD .CcF5fU {
display: inline-block
}
._ZDS_DM_ENABLED_ ._DD .awiwSm {
display: none
}
/* Rules for Nested level 2 */
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._D, ._ML, ._MD)
.CcF5fU,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._ML, ._MD)
.awiwSm,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._MD)
.rlur1y,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML)
.QUEh3M {
display: none;
}
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L)
.CcF5fU,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
._D
.awiwSm,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
._ML
.rlur1y,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
._MD
.QUEh3M {
display: inline-block;
}
._ZDS_DM_ENABLED_
:is(._DD, ._L, ._D, ._ML, ._MD)
._DD
.CcF5fU {
display: inline-block
}
._ZDS_DM_ENABLED_
:is(._DD, ._L, ._D, ._ML, ._MD)
._DD
.awiwSm {
display: none
}
/* Rules for Nested level 3 (max level allowed) */
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._D, ._ML, ._MD)
.CcF5fU,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._ML, ._MD)
.awiwSm,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._MD)
.rlur1y,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML)
.QUEh3M {
display: none;
}
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L)
.CcF5fU,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
._D
.awiwSm,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
._ML
.rlur1y,
:not(._)
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
._MD
.QUEh3M {
display: inline-block;
}
._ZDS_DM_ENABLED_
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
._DD
.CcF5fU {
display: inline-block
}
._ZDS_DM_ENABLED_
:is(._DD, ._L, ._D, ._ML, ._MD)
:is(._DD, ._L, ._D, ._ML, ._MD)
._DD
.awiwSm {
display: none
}
/*
Doing this gives us the ability to override the margins
where typography is used.
FIGURE: Support override atom styling
*//* Need to utility when composing custom SVG icons. *//*
text-decoration: line-through;
*//*
text-decoration: underline
*//*
white-space: no-wrap;
*//*
white-space: normal;
*/.v8v6pv {
opacity: 0.5;
}:root {
--input-base-standard-height: 40px;
--input-base-dense-height: 28px;
/* TODO(major-77): remove this variable and its uses */
--password-base-toggle-height: 100%;
--input-fake-checkbox-base-height: 1.5rem;
--input-fake-checkbox-base-width: 1.5rem;
}/* Label styling *//* Disable label styling *//* Base input element styling *//* Placeholder styling */::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: var(--color-text-secondary);
}::-moz-placeholder {
/* Firefox 19+ */
color: var(--color-text-secondary);
}/* FIXME cleanup IE 10+ BELOW ? */:-ms-input-placeholder {
/* IE 10+ */
color: var(--color-text-secondary);
}:-moz-placeholder {
/* Firefox 18- */
color: var(--color-text-secondary);
}/* Hide Microsoft Edge default password toggle button */::-ms-reveal {
display: none;
}/*Checkmark of the fake checkbox*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) */
:root {
--rating-outline-focus: rgb(42, 155, 255);
}
.rm2SJ5:last-child {
margin-right: var(--spacing-none);
}
._8b3ao1 {
/* this is work around */
width: 50%;
}
[data-js-focus-visible] .vEYhaZ[data-focus-visible-added]:focus + ._0fo8_O {
transform: scale(1.1);
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) */.HjQBqa {
background-position: center top;
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) */.teXInD {
background-repeat: no-repeat;
}._2JyoMb {
background-position: center;
}.jP-Ndk {
background-size: cover;
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
Doing this gives us the ability to override the margins
where typography is used.
FIGURE: Support override atom styling
*//* Need to utility when composing custom SVG icons. *//*
text-decoration: line-through;
*//*
text-decoration: underline
*//*
white-space: no-wrap;
*//*
white-space: normal;
*/.orXpw4 {
padding-top: calc(1 / var(--ratio-square) * 100%)
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) */
/*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*/
.DikYjn {
border-radius: var(--component-icon-button-border-radius);
}
/** Need pseudo class to expand toucharea, enable this only for touch devices */
[data-js-focus-visible] .W4gxOr[data-focus-visible-added]:focus {
padding: calc(var(--spacing-2xs) - var(--border-width-m));
}
[data-js-focus-visible] .Uwsb06[data-focus-visible-added]:focus {
padding: calc(var(--spacing-xs) - var(--border-width-m));
}
[data-js-focus-visible] .WtocDo[data-focus-visible-added]:focus {
background-color: var(--color-background-default) !important;
box-shadow: inset 99px 1px var(--color-background-focus);
}
[data-js-focus-visible] .WtocDo[data-focus-visible-added]:active {
background-color: var(--color-background-default) !important;
box-shadow: inset 99px 1px var(--color-background-pressed);
}
/* TODO remove for next major version and swap to withBoxShadowLayer in JS */
[data-js-focus-visible] ._6MANVh[data-focus-visible-added]:focus {
background-color: var(--color-background-default) !important;
box-shadow: inset 99px 1px var(--color-background-focus);
}
[data-js-focus-visible] ._6MANVh[data-focus-visible-added]:active {
background-color: var(--color-background-default) !important;
box-shadow: inset 99px 1px var(--color-background-pressed);
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS *//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
/* TODO(major-76): Compose root form the @dx/base-icon-button after we remove the hover styles */
.kmKb8o {
/*composes: default-icon-button;*/
}
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:focus {
background-color: var(--color-background-focus);
border: var(--border-width-m) var(--border-style-solid)
var(--color-border-focus)
}
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:focus,
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:focus * {
color: var(--color-text-focus);
}
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:active {
background-color: var(--color-background-pressed)
}
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:active,
[data-js-focus-visible] .kmKb8o[data-focus-visible-added]:active * {
color: var(--color-text-pressed) !important;
}
/* New styles separated by interaction */
/* TODO: Explain here why we need these overrides and when/how we should removed it */
[data-js-focus-visible] .zzR49t[data-focus-visible-added]:focus {
background-color: var(--component-wishlist-color-background) !important;
box-shadow: inset 99px 1px var(--color-background-focus);
}
[data-js-focus-visible]
.Iygl3w[data-focus-visible-added]:active {
background-color: var(--color-background-default) !important;
box-shadow: inset 99px 1px var(--color-background-pressed);
}/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
.OZc_zj {
opacity: 0;
}
._3ThOqe {
opacity: 0;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.r4BMyy {
opacity: 0
}
.Uamw5R {
opacity: 1
}
.Giij_h {
opacity: 1
}
.eRH16G {
opacity: 1
}
.s-bdrf {
opacity: 0
}
.ZcvdLM {
display: none;
}
/* Always show the scrolling border when on full screen mode *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
.lwh72c {
opacity: 0;
}
._12NJC_ {
opacity: 0;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.Xt7i0U {
opacity: 0
}
.POlFUl {
opacity: 1
}
._8rkNJ2 {
opacity: 1
}
.jfnrUp {
opacity: 1
}
.v3Bm_V {
opacity: 0
}
.YzpvVa {
display: none;
}
/* Always show the scrolling border when on full screen mode */.OgxZRj {
min-height: 100%;
}/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
._0913PL {
opacity: 0;
}
.U94BQ8 {
opacity: 0;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.dRH4N6 {
opacity: 0
}
.qOKAPi {
opacity: 1
}
.J_BwZA {
opacity: 1
}
.NG4orI {
opacity: 1
}
.GTRpHz {
opacity: 0
}
.Dr0Q4A {
display: none;
}
/* Always show the scrolling border when on full screen mode */
/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */.Vehx7N {
top: var(--spacing-3xs);
}._2CapDZ {
right: var(--spacing-3xs);
}.rtJ1xB {
margin-top: auto;
}.rcSA-Z {
padding-right: var(--spacing-xl);
}.ODGSbs {
padding-left: var(--spacing-xs);
}:root {
--modal-padding-mobile: 24px;
}.rYeFyD {
background-color: var(--color-background-overlay);
-webkit-tap-highlight-color: transparent;
touch-action: none;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}._4zzsMy {
min-height: 3rem;
}._6Us0WG {
padding-top: var(--modal-padding-mobile);
padding-left: var(--modal-padding-mobile);
padding-right: var(--modal-padding-mobile);
/* Use two overlapping gradients to get top border only on scroll */
}._6Us0WG:after {
display: block;
content: "";
height: var(--modal-padding-mobile);
}._6Us0WG {
-webkit-overflow-scrolling: touch;
background: linear-gradient(
transparent 1px,
var(--color-background-default) 1px
),
linear-gradient(transparent 1px, var(--color-background-default) 1px);
background-attachment: local, scroll;
background-repeat: no-repeat;
background-size: 100% 16px, 100% 16px;
}
:root {
--flyout-modal-max-width: 768px;
--padding-mobile: 24px;
--padding-tablet: 32px;
}
.b8opOb {
opacity: 0;
}
.PGkh0H {
opacity: 0;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.AShtWg {
opacity: 0
}
.dr0Ybt {
opacity: 1
}
.oRQ3ld {
opacity: 1
}
.vozHzX {
opacity: 1
}
.YFApn_ {
opacity: 0
}
/* Always show the scrolling border when on full screen mode *//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS *//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
:root {
--flyout-picker-max-height: 320px;
--flyout-picker-border-width: 4px;
}
._8ZN1IB {
background-color: inherit;
height: calc(var(--flyout-picker-border-width) + 2px);
}
[data-popper-placement^="bottom"] ._8ZN1IB {
top: calc(-1 * (var(--flyout-picker-border-width) + 1px));
}
[data-popper-placement^="top"] ._8ZN1IB {
bottom: calc(-1 * (var(--flyout-picker-border-width + 1px)));
}
[data-popper-placement^="top"].f-fWDM .VdyvRm {
order: 2;
}
[data-popper-placement^="top"].f-fWDM .F8If-J {
order: 1;
}
[data-popper-placement^="top"].f-fWDM .yLdi2N {
order: 0;
border-bottom-style: solid;
border-bottom-width: 2px;
border-top-width: 0;
}
/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/
.UTe4Ds {
display: none !important;
}
.U8HkgL {
transition: all 0;
}
._fkjIJ {
opacity: 0;
}
._69-MVd {
opacity: 0.5;
}
.e6XcDL {
opacity: 0.5;
}
.mMWpFV {
opacity: 0.5;
}
.sL1_6i {
opacity: 0;
}
.q5ClKL {
transform: translate3d(0, 100%, 0);
}
:root {
--flyout-dropdown-width: 312px;
--flyout-dropdown-max-height: 480px;
--flyout-dropdown-border-width: calc(
var(--border-width-m) * 2
); /* was 4px, check calculations below */
}
._0ofwUT {
width: var(--flyout-dropdown-width);
opacity: 0;
}
.sCKyjA {
background-color: inherit;
height: calc(var(--flyout-dropdown-border-width) + 2px);
}
[data-popper-placement^="bottom"] .sCKyjA {
top: calc(-1 * (var(--flyout-dropdown-border-width) + 1px));
}
[data-popper-placement^="top"] .sCKyjA {
bottom: calc(-1 * (var(--flyout-dropdown-border-width) + 1px));
}
[data-popper-placement^="top"].mzWBs0 .kjq1BW {
order: 2;
}
[data-popper-placement^="top"].mzWBs0 .VAkC61 {
order: 1;
}
[data-popper-placement^="top"].mzWBs0 .FbFtjr {
order: 0;
border-bottom-style: var(--border-style-solid);
border-bottom-width: var(--border-width-m);
border-top-width: 0;
}
/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/
.-SLwul {
opacity: 0;
}
.zvYeCP {
opacity: 1;
}
.Ai8zI4 {
opacity: 1;
}
.uXCj2l {
opacity: 1;
}
.ZOFWwO {
opacity: 0;
}
.uMfNEX {
display: none !important;
}
.VAkC61 {
max-height: var(--flyout-dropdown-max-height);
}
[data-js-focus-visible] ._8uxdXU[data-focus-visible-added]:focus {
background-color: var(--color-background-focus);
}/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
._3Bo3TW {
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}
/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/
.fb0CD6 {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}
._7u4j-m {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.oskpje {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.zSUEHG {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.-mHn-o {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}
._9YnfoD {
display: none;
}
._22Z8Np {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}
._9NuV3F {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
._-6YWQM {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
.DiwGih {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
.CLrZIL {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}
.E5PjJb {
display: none !important;
transform: translate3d(0, 100%, 0);
}/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/
/*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */.R_KZAo {
align-items: flex-end;
}.Fkz6uG {
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}/*
CSSTransition works adding classes in the various animation phases. for this to
work those classes should either do not affect the same CSS rules (rarely the
case with animations), or guarantee precedence order. Using composition would
not satisfy the precedence requirement leading to animation classes to be
unpredictably overridden (e.g. by the base class). For now we can avoid the
issue not using composition in CSSTransition CSS classes.
*/.jm73ZK {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}.QiZjIF {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}.nO3D5s {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}.hiPSq2 {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}.lOgXi9 {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}.aPWK9- {
display: none;
}.P4l6-e {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}._4OmTQl {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}.wsRRiK {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}.mY7Ron {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}.pd6if_ {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}.SyfL-B {
display: none !important;
transform: translate3d(0, 100%, 0);
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
:root {
--flyout-drawer-right-width: 80%;
--flyout-drawer-right-max-width: 320px;
}
.Uycgzn {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}
.N--U7R {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
._46LQhQ {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
.uGFpnB {
transition: var(--drawer-exit-transition-curve);
opacity: 0.5;
}
.ng3UdY {
width: var(--flyout-drawer-right-width);
max-width: var(--flyout-drawer-right-max-width);
transition: transform 195ms cubic-bezier(0.4, 0, 1, 1);
transform: var(--drawer-transform-right-out);
}
.sGGlMl {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-right-out);
}
.xvSjMi {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-right-in);
}
.T7fdPK {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-right-in);
}
.LRa99m {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-right-in);
}
.eOe7Ua {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-right-out);
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */
:root {
--flyout-drawer-left-width: 80%;
--flyout-drawer-left-max-width: 320px;
}
.N5xjdq {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}
.hbyUfC {
transition: var(--drawer-enter-transition-curve);
opacity: 0.5;
}
.T64ekx {
transition: var(--drawer-enter-transition-curve);
opacity: 0.5;
}
.Gzed8a {
transition: var(--drawer-enter-transition-curve);
opacity: 0.5;
}
.tw3yx0 {
transition: var(--drawer-enter-transition-curve);
opacity: 0;
}
._9yCyS9 {
display: none;
}
.C0EuUk {
width: var(--flyout-drawer-left-width);
max-width: var(--flyout-drawer-left-max-width);
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-left-out);
}
._6cjMZf {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-left-out);
}
.EBv2xX {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-left-in);
}
.qfLNBo {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-left-in);
}
.jRAqLb {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-left-in);
}
.aVrQya {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-left-out);
}
.ucOH4C {
display: none;
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) */:root {
--icon-button-min-toucharea-size: 48px;
}[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:focus {
background-color: var(--color-background-focus);
border: var(--border-width-m) var(--border-style-solid)
var(--color-border-focus)
}[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:focus,
[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:focus * {
color: var(--color-text-focus);
}[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:active {
background-color: var(--color-background-pressed)
}[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:active,
[data-js-focus-visible] .IPH5OT[data-focus-visible-added]:active * {
color: var(--color-text-pressed) !important;
}/*
* Workaround for component level token on the root to prevent major 76.
* TODO(major-76): cleanup for major 76
*//** Need pseudo class to expand toucharea, enable this only for touch devices *//* TODO remove for next major version and swap to withBoxShadowLayer in JS */.mZoZK2 {
max-height: 100%;
}._3Yda1k {
overflow: auto;
}.XZLqti {
margin-left: auto;
}:root {
--drawer-enter-transition-curve: transform 195ms cubic-bezier(0.4, 0, 1, 1),
opacity 195ms cubic-bezier(0.4, 0, 1, 1);
--drawer-exit-transition-curve: transform 225ms cubic-bezier(0, 0, 0.2, 1),
opacity 225ms cubic-bezier(0, 0, 0.2, 1);
--drawer-transform-bottom-out: translate3d(0, 100%, 0);
--drawer-transform-bottom-in: translate3d(0, 0, 0);
--drawer-transform-left-out: translate3d(-100%, 0, 0);
--drawer-transform-left-in: translate3d(0, 0, 0);
--drawer-transform-right-out: translate3d(100%, 0, 0);
--drawer-transform-right-in: translate3d(0, 0, 0);
}.suGiUx {
-webkit-tap-highlight-color: transparent;
touch-action: none;
}
:root {
--drawer-bottom-padding-mobile: 8px;
--drawer-bottom-padding-tablet: 8px;
}
.jXAL_5 {
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
transform: translate3d(0, 100%, 0);
}
.IsVrTP {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}
.FkrgW3 {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.AsLZyy {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.SuRd-k {
display: flex;
transition: var(--drawer-exit-transition-curve);
transform: var(--drawer-transform-bottom-in);
}
.Jej6bK {
display: flex;
transition: var(--drawer-enter-transition-curve);
transform: var(--drawer-transform-bottom-out);
}
.tRh_gS {
display: none !important;
transform: translate3d(0, 100%, 0);
}
.pA9EGb {
padding-top: var(--drawer-bottom-padding-mobile)
}
.pA9EGb:after {
content: "";
display: block;
height: var(--drawer-bottom-padding-mobile);
}.fKkxVM {
margin: var(--spacing-s);
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*/._11BoAR {
left: var(--grid-margin)
}/*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*/
.F3MynY[focus-within] {
position: absolute;
z-index: 1;
display: inline-block;
height: auto;
width: auto;
overflow: aajkfN wOOxir _0m5pni KVKCn3 ZkIJC- r9BRio;
clip: auto;
}
.F3MynY:focus-within {
position: absolute;
z-index: 1;
display: inline-block;
height: auto;
width: auto;
overflow: aajkfN wOOxir _0m5pni KVKCn3 ZkIJC- r9BRio;
clip: auto;
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*/.bhd0J_ {
padding-left: calc(var(--grid-margin) - var(--grid-gutter) / 2);
padding-right: calc(var(--grid-margin) - var(--grid-gutter) / 2)
}.bhd0J_ .I7OI1O,
.bhd0J_ .bhd0J_ {
margin-left: calc(-1 * (var(--grid-gutter) / 2));
width: calc(100% + var(--grid-gutter));
}.bhd0J_ .bhd0J_ {
padding-left: 0;
padding-right: 0;
}/*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*/.z6_SpG,
.Fxqxav {
max-width: calc((100%) / 12 * (9));
flex-basis: calc((100%) / 12 * (9));
}/*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*//*
Doing this gives us the ability to override the margins
where typography is used.
FIGURE: Support override atom styling
*//* Need to utility when composing custom SVG icons. *//*
text-decoration: line-through;
*//*
text-decoration: underline
*//*
white-space: no-wrap;
*//*
white-space: normal;
*//*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*
*
*
*
*
* ```
*
* Grids should support nesting to any depth with those rules:
* - any nested grid divides the available space into 12 new columns
* - nested and parent grids should share the same gutters in any breakpoints
* - nested grids do not have margins and the first and last columns should
* align to the parent column edges
*//*
* # paddingGrid
*
* `paddingGrid` is a drop in replacement for `grid` that uses padding instead of
* margins to implement the grid margins.
*//*
* # col
*
* The `col` class is the only allowed child of `row` and `rowNoWrap` and should
* be used together with `span` and, if needed, `offset` classes
*//*
* # row
*
* the `row` class is the only allowed child of all grid variants
*//*
* span and offset definitons
*//*
* # rowNoWrap
*
* `rowNoWrap` is a special `row` alternative that is mean to be used
* exclusively to implement full screen scrolling divs that have childrens
* aligned with the grid. It only works with the theoretically forbidden class
* usage `.paddingGrid.rowNoWrap` as the only way for a grid to be scrollable
* outside of the grid boundaries is to be a container with the size of the
* screen with paddings aligned with the grid, overflow scroll and not wrapping
* down flex element, plus some additional css optimization in the scrollable
* container layout.
*//*
* # grid edges
*
* two classes are provided: `gridLeftEdge` and `gridRightEdge`.
*
* When applied to an element they will position it absolutely on the respective
* edge of the current "closer" parent grid.
*
* When applied to an element outside of any grid, it will align to the grid
* margins in the current breakpoints.
*//*
* # padded rows
*
* Three classes are provided: `padded`, `paddedLeft` and `paddedRight` as
* modifiers of the `row` class.
*
* They can be used to add a padding in nested `paddingGrid` that has the same
* size of the current global grid margin.
*
* This is needed because an element based on `paddingGrid` that has a colored
* background relies on the grid margin to have a spacing between the content
* and the edge of the colored area. When such an element is nested in another
* grid, by the definition of nested grids, the padding is reset to zero so that
* the content aligns with the parent column edges, this leads to having the
* text content and the colored edge touching. As this is visually unpleasant we
* can use those classes to force a predefined padding in one or both sides of
* the row when it is nested.
*//*
* # edgeToEdge
*
* `edgeToEdge`, `leftEdge` and `rightEdge` classes, plus their responsive
* variants are provided as modifiers of the `row` class.
*
* The responsive variants operate in strict mode.
*
* Those classes will break the row boundaries and will make them touch the
* screen edges in one or both sides.
*
* This feature cab be used to implement designs that want to break the grid
* boundaries in one or both sides and/or allowing a row to do so only on
* specific breakpoints.
*
* ## limitations
*
* Only certain column combinations inside an `edgeToEdge` row will guarantee
* alignment with normal grid columns (e.g. `span12` and `span6`), this happens
* because the row is now dividing a much larger area in 12 columns leading to
* the columns to have a different size than all the other columns on the page.
*//*
* # spanScreen
*
* A `spanScreen` class (only available in strict breakpoints) is provided as a
* modifier of the `col` class.
*
* It allows a specific columns to become as big as the whole screen in certain
* breakpoints (currently allowed only for `mobile`, `phablet` and `tablet`)
*//*
* # gridMargin
*
* `gridMargin`, `gridMarginLeft` and `gridMarginRight` plus responsive variants
* in strict mode are provided as generic utility classes.
*
* They allow a given element to have the same margin of the grid in the current
* breakpoint in one or both sides.
*/.TOJxrT {
height: 48px;
}.IZKqt7 {
width: 48px;
}/*
Doing this gives us the ability to override the margins
where typography is used.
FIGURE: Support override atom styling
*//* Need to utility when composing custom SVG icons. *//*
text-decoration: line-through;
*//*
text-decoration: underline
*//*
white-space: no-wrap;
*//*
white-space: normal;
*/
:root {
--paginationButtonBottom: 40px;
}
._4DgSMn {
bottom: var(--paginationButtonBottom);
transform: translateX(calc(50%));
right: -6px
}/*
import { dangerousHackEscapeOutfitCardAnchorImage } from "@dx/container";
*//************************************************************************************
* New set of styles compatible with the new dark mode swap automatic swap of assets
*
* Note:
* We use the selector ":not(:global(._))" to ensure that those selectors have the
* same specificity that the ones with only the selector ":global(._ZDS_DM_ENABLED_)"
* ensuring the rules are applied in the right order.
************************************************************************************//* Rules for Nested level 0 *//* Rules for Nested level 1 *//* Rules for Nested level 2 *//* Rules for Nested level 3 (max level allowed) *//*
* # grid
*
* The grid supports offsets and spans(including span0 to hide columns).
*
* The grid uses the following html structure:
*
* ```tsx
*