@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
499 lines (491 loc) • 28.1 kB
CSS
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/* stylelint-disable @awsui/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
/* stylelint-enable @awsui/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/* Style used for links in slots/components that are text heavy, to help links stand out among
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
.awsui_header-cell_1spae_1mxxe_149:not(#\9) {
position: relative;
text-align: start;
box-sizing: border-box;
border-block-end: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded);
background: var(--color-background-table-header-rhxv7u, #fafafa);
color: var(--color-text-column-header-xxfilq, #545b64);
font-weight: var(--font-weight-heading-s-6rdhmg, 700);
-webkit-font-smoothing: var(--font-smoothing-webkit-gsroen, auto);
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-7ax6sl, auto);
padding-block: var(--space-scaled-xxs-t2t62i, 4px);
padding-inline: var(--space-scaled-xs-wbfgrv, 8px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149:not(#\9):focus {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149:not(#\9):focus {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149:not(#\9):focus::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9) {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9) {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9)::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
.awsui_header-cell-sticky_1spae_1mxxe_204:not(#\9) {
border-block-end: var(--border-table-sticky-width-vd8s3w, 0px) solid var(--color-border-divider-default-g2zqci, #eaeded);
}
.awsui_header-cell-stuck_1spae_1mxxe_207:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1mxxe_207) {
border-block-end-color: transparent;
}
.awsui_header-cell-variant-full-page_1spae_1mxxe_207:not(#\9) {
background: var(--color-background-layout-main-f3jtyd, #f2f3f3);
}
.awsui_header-cell-variant-full-page_1spae_1mxxe_207.awsui_header-cell-hidden_1spae_1mxxe_213:not(#\9) {
border-block-end-color: transparent;
}
.awsui_header-cell-variant-embedded_1spae_1mxxe_216.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1mxxe_204, .awsui_sticky-cell_1spae_1mxxe_216)), .awsui_header-cell-variant-borderless_1spae_1mxxe_216.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1mxxe_204, .awsui_sticky-cell_1spae_1mxxe_216)) {
background: none;
}
.awsui_header-cell_1spae_1mxxe_149:not(#\9):last-child, .awsui_header-cell_1spae_1mxxe_149.awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9) {
padding-inline-end: var(--space-xs-edba2s, 8px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell_1spae_1mxxe_216:not(#\9) {
position: sticky;
background: var(--color-background-table-header-rhxv7u, #fafafa);
z-index: 798;
transition-property: padding;
transition-duration: var(--motion-duration-transition-show-quick-tx10w8, 90ms);
transition-timing-function: var(--motion-easing-sticky-h2dhfe, ease-out);
}
@media (prefers-reduced-motion: reduce) {
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell_1spae_1mxxe_216:not(#\9) {
animation: none;
transition: none;
}
}
.awsui-motion-disabled .awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell_1spae_1mxxe_216:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell_1spae_1mxxe_216:not(#\9) {
animation: none;
transition: none;
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell_1spae_1mxxe_216.awsui_table-variant-full-page_1spae_1mxxe_240:not(#\9) {
background: var(--color-background-layout-main-f3jtyd, #f2f3f3);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-pad-left_1spae_1mxxe_243:not(#\9):not(.awsui_has-selection_1spae_1mxxe_243) {
padding-inline-start: var(--space-table-horizontal-7d96o1, 0px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-last-inline-start_1spae_1mxxe_246:not(#\9) {
box-shadow: var(--shadow-sticky-column-first-u88e78, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
clip-path: inset(0px -24px 0px 0px);
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-last-inline-start_1spae_1mxxe_246 > .awsui_resize-divider_1spae_1mxxe_251:not(#\9) {
display: none;
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-last-inline-start_1spae_1mxxe_246:not(#\9):dir(rtl) {
box-shadow: var(--shadow-sticky-column-last-avmjwq, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
clip-path: inset(0 0 0 -24px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-last-inline-end_1spae_1mxxe_258:not(#\9) {
box-shadow: var(--shadow-sticky-column-last-avmjwq, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
clip-path: inset(0 0 0 -24px);
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
}
.awsui_header-cell_1spae_1mxxe_149.awsui_sticky-cell-last-inline-end_1spae_1mxxe_258:not(#\9):dir(rtl) {
box-shadow: var(--shadow-sticky-column-first-u88e78, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
clip-path: inset(0 -24px 0 0);
}
.awsui_sorting-icon_1spae_1mxxe_268:not(#\9) {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
inset-inline-end: var(--space-xxs-ja5cp8, 4px);
color: var(--color-text-column-sorting-icon-xqw2vv, #687078);
}
.awsui_edit-icon_1spae_1mxxe_276:not(#\9) {
margin-inline-start: var(--space-xxs-ja5cp8, 4px);
margin-block-start: var(--space-scaled-xxs-t2t62i, 4px);
color: inherit;
}
.awsui_header-cell-content_1spae_1mxxe_282:not(#\9) {
position: relative;
padding-block: var(--space-scaled-xxs-t2t62i, 4px);
padding-inline-end: var(--space-s-hdd878, 12px);
padding-inline-start: var(--space-s-hdd878, 12px);
}
.awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-content-expandable_1spae_1mxxe_288:not(#\9) {
padding-inline-start: calc(var(--space-s-hdd878, 12px) + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_header-cell-sortable_1spae_1mxxe_219 > .awsui_header-cell-content_1spae_1mxxe_282:not(#\9) {
padding-inline-end: calc(var(--space-xl-gsucfg, 24px) + var(--space-xxs-ja5cp8, 4px));
}
.awsui_header-cell-content_1spae_1mxxe_282:not(#\9):focus {
outline: none;
text-decoration: none;
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282:not(#\9):focus {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282:not(#\9):focus {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282:not(#\9):focus::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9) {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9) {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183:not(#\9)::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
.awsui_header-cell-disabled_1spae_1mxxe_340.awsui_header-cell-sorted_1spae_1mxxe_340 > .awsui_header-cell-content_1spae_1mxxe_282 > .awsui_sorting-icon_1spae_1mxxe_268:not(#\9) {
color: var(--color-text-interactive-disabled-jwju02, #aab7b8);
}
.awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9):not(.awsui_header-cell-disabled_1spae_1mxxe_340) > .awsui_header-cell-content_1spae_1mxxe_282 {
cursor: pointer;
}
.awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9):not(.awsui_header-cell-disabled_1spae_1mxxe_340) > .awsui_header-cell-content_1spae_1mxxe_282:hover, .awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9):not(.awsui_header-cell-disabled_1spae_1mxxe_340).awsui_header-cell-sorted_1spae_1mxxe_340 > .awsui_header-cell-content_1spae_1mxxe_282 {
color: var(--color-text-interactive-active-ifmuec, #16191f);
}
.awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9):not(.awsui_header-cell-disabled_1spae_1mxxe_340) > .awsui_header-cell-content_1spae_1mxxe_282:hover > .awsui_sorting-icon_1spae_1mxxe_268, .awsui_header-cell-sortable_1spae_1mxxe_219:not(#\9):not(.awsui_header-cell-disabled_1spae_1mxxe_340).awsui_header-cell-sorted_1spae_1mxxe_340 > .awsui_header-cell-content_1spae_1mxxe_282 > .awsui_sorting-icon_1spae_1mxxe_268 {
color: var(--color-text-interactive-active-ifmuec, #16191f);
}
.awsui_header-cell-text_1spae_1mxxe_354:not(#\9) {
line-height: var(--line-height-heading-xs-8t7s1x, 20px);
padding-block: calc(var(--space-xxxs-j6dpcy, 2px) / 2);
}
.awsui_header-cell-text_1spae_1mxxe_354:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1mxxe_358) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.awsui_header-cell-ascending_1spae_1mxxe_364:not(#\9),
.awsui_header-cell-descending_1spae_1mxxe_365:not(#\9) {
/* used in test-utils */
}
/*
In Visual Refresh the first cell in the header should align
with the left edge of the table as closely as possible. If the
last header cell is sortable the sort icon should align with the
settings icon in the pagination slot.
*/
.awsui_header-cell_1spae_1mxxe_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1mxxe_216):first-child {
padding-inline-start: var(--space-xs-edba2s, 8px);
}
.awsui_header-cell_1spae_1mxxe_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1mxxe_216):first-child.awsui_header-cell-content-expandable_1spae_1mxxe_288 {
padding-inline-start: calc(var(--space-xs-edba2s, 8px) + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9) {
/*
Striped rows requires additional left padding because the
shaded background makes the child content appear too close
to the table edge.
*/
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child:focus {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child:focus {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child:focus::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1mxxe_183 {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1mxxe_183 {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1mxxe_183::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px) + var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282 {
padding-inline-start: 0px;
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-content-expandable_1spae_1mxxe_288 {
padding-inline-start: calc(0px + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282:focus {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282:focus {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282:focus::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183 {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183 {
outline: 2px dotted transparent;
outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1mxxe_282.awsui_header-cell-fake-focus_1spae_1mxxe_183::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)));
inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px) + var(--space-scaled-xxs-t2t62i, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-rt15yg, 0px)));
border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1mxxe_479):not(.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479) {
padding-inline-start: var(--space-xxxs-j6dpcy, 2px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1mxxe_479):not(.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479).awsui_header-cell-content-expandable_1spae_1mxxe_288 {
padding-inline-start: calc(var(--space-xxxs-j6dpcy, 2px) + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child.awsui_has-striped-rows_1spae_1mxxe_479:not(.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479) {
padding-inline-start: var(--space-xxs-ja5cp8, 4px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):first-child.awsui_has-striped-rows_1spae_1mxxe_479:not(.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479).awsui_header-cell-content-expandable_1spae_1mxxe_288 {
padding-inline-start: calc(var(--space-xxs-ja5cp8, 4px) + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216:not(#\9):last-child.awsui_header-cell-sortable_1spae_1mxxe_219:not(.awsui_header-cell-resizable_1spae_1mxxe_491) {
padding-inline-end: var(--space-xxxs-j6dpcy, 2px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479:not(#\9) {
padding-inline-start: var(--space-scaled-l-2rs0gk, 20px);
}
.awsui_header-cell_1spae_1mxxe_149.awsui_is-visual-refresh_1spae_1mxxe_216.awsui_sticky-cell-pad-inline-start_1spae_1mxxe_479.awsui_header-cell-content-expandable_1spae_1mxxe_288:not(#\9) {
padding-inline-start: calc(var(--space-scaled-l-2rs0gk, 20px) + var(--space-m-h2th94, 16px) + var(--space-xs-edba2s, 8px));
}