UNPKG

@carbon/ibm-products

Version:
1,676 lines (1,498 loc) 824 kB
.c4p--apikey-modal .cds--modal-close { display: none; } .c4p--apikey-modal .cds--inline-loading { min-block-size: 3rem; } .c4p--apikey-modal .cds--modal-content { padding-inline-end: 1rem; } .c4p--apikey-modal__body { margin-block-end: 1rem; padding-inline-end: calc(20% - 1rem); } .c4p--apikey-modal__messaging { display: flex; margin-block-start: 0.5rem; padding-inline-end: calc(20% - 1rem); } .c4p--apikey-modal__messaging-text { flex: 1; margin-inline-start: 0.5rem; font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); } .c4p--apikey-modal__messaging-text > * { font: inherit; } .c4p--apikey-modal__error-icon svg { fill: var(--cds-button-danger-primary, #da1e28); } .c4p--apikey-modal__checkmark-icon { fill: var(--cds-button-primary, #0f62fe); } .c4p--about-modal .cds--modal-container { grid-template-rows: auto auto 1fr auto; } .c4p--about-modal .c4p--about-modal__logo { margin: 1rem 1rem 2rem 1rem; } .c4p--about-modal .c4p--about-modal__header { padding: 0; grid-row: auto; margin-block-end: 0; padding-inline-end: 20%; padding-inline-start: 1rem; } .c4p--about-modal .c4p--about-modal__title { font-size: var(--cds-heading-04-font-size, 1.75rem); font-weight: var(--cds-heading-04-font-weight, 400); line-height: var(--cds-heading-04-line-height, 1.28572); letter-spacing: var(--cds-heading-04-letter-spacing, 0); color: var(--cds-text-primary, #161616); } .c4p--about-modal .c4p--about-modal__body { font-size: var(--cds-body-compact-02-font-size, 1rem); font-weight: var(--cds-body-compact-02-font-weight, 400); line-height: var(--cds-body-compact-02-line-height, 1.375); letter-spacing: var(--cds-body-compact-02-letter-spacing, 0); overflow: hidden auto; grid-row: auto; min-block-size: 4rem; padding-block-start: 0; padding-inline: 1rem 20%; } .c4p--about-modal .c4p--about-modal__body:not(.cds--modal-scroll-content) { margin-block-end: 1.5rem; padding-block-end: 0; } .c4p--about-modal .cds--modal-content--overflow-indicator { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4)); inset-block-end: 1.5rem; } .c4p--about-modal .c4p--about-modal__links-container { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); margin-block-start: 1.5rem; } .c4p--about-modal .c4p--about-modal__version { color: var(--cds-text-secondary, #525252); } .c4p--about-modal .c4p--about-modal__links-container a + a { border-inline-start: 1px solid var(--cds-border-strong-01, #8d8d8d); margin-inline-start: 0.5rem; padding-inline-start: 0.5rem; } .c4p--about-modal .c4p--about-modal__content, .c4p--about-modal .c4p--about-modal__copyright-text { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); margin-block: 1.5rem 0; } .c4p--about-modal .c4p--about-modal__copyright-text { margin-block-start: 1rem; } p.c4p--about-modal__content:first-child, p.c4p--about-modal__copyright-text:first-child { margin-block-start: 2rem; } .c4p--about-modal .c4p--about-modal__footer { display: block; padding: 1rem; background-color: var(--cds-layer-02, #ffffff); block-size: auto; } .c4p--action-set { align-items: stretch; justify-content: flex-end; background-color: var(--cds-layer-01, #f4f4f4); } .c4p--action-set .c4p--action-set__action-button { font-size: var(--cds-body-short-01-font-size, 0.875rem); font-weight: var(--cds-body-short-01-font-weight, 400); line-height: var(--cds-body-short-01-line-height, 1.28572); letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px); align-items: center; margin: 0; } .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive { block-size: 4rem; padding-block: 1rem 2rem; } .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive, .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn { max-inline-size: none; } .c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost { padding-inline-start: 1rem; } .c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button, .c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost { flex: 0 0 100%; } .c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost { flex: 1 1 75%; } .c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost), .c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button, .c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button, .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost { flex: 0 1 50%; } .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost { flex: 1 1 50%; } .c4p--action-set.cds--btn-set.c4p--action-set--row-triple.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost), .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost), .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost), .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) { flex: 0 1 25%; /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */ max-inline-size: 14.5rem; } .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost { flex: 1 1 25%; } .c4p--action-set .c4p--action-set__action-button .cds--inline-loading { position: absolute; inline-size: 2rem; inset-block-start: 0; inset-inline-end: 0; } .c4p--add-select__header { padding: 1rem; border-block-start: 1px solid var(--cds-layer-accent-01, #e0e0e0); padding-block-end: 0; } .c4p--add-select__body { padding: 1rem; } /* stylelint-disable max-nesting-depth */ .c4p--add-select__selections-wrapper { display: block; } .c4p--add-select__selections-cell-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; block-size: 3rem; border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0); } .c4p--add-select__selections-cell-title { display: block; color: var(--cds-text-primary, #161616); } .c4p--add-select__selections-cell-subtitle { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); display: block; color: var(--cds-text-secondary, #525252); } .c4p--add-select__selections-cell { display: flex; flex-direction: column; justify-content: center; } .c4p--add-select__selections-dropdown .cds--dropdown { background: transparent; } .c4p--add-select__selections-row--selected { background-color: var(--cds-layer-selected-01, #e0e0e0); } .c4p--add-select__selections-row--active { background-color: var(--cds-layer-active-01, #c6c6c6); } .c4p--add-select__selections-form-control { display: flex; align-items: center; } .c4p--add-select__selections-form-control-wrapper--radio { cursor: pointer; } .c4p--add-select__selections-form-control-label-wrapper { display: flex; margin-inline-start: 1rem; } .c4p--add-select__selections-form-control-label-text { display: flex; flex-direction: column; } .c4p--add-select__selections-cell-avatar { margin-inline-end: 0.5rem; } .c4p--add-select__selections-cell-icon { margin-inline-end: 0.5rem; } .c4p--add-select__selections-row { border-inline-start: 0.125rem solid transparent; } .c4p--add-select__selections-row-meta--selected { background-color: var(--cds-layer-hover-01, #e8e8e8); border-inline-start: 0.125rem solid var(--cds-interactive, #0f62fe); } .c4p--add-select .c4p--add-select__selections-row:hover { background: var(--cds-layer-hover-01, #e8e8e8); } .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-cell-title { color: var(--cds-interactive, #0f62fe); } .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-view-children svg { color: var(--cds-interactive, #0f62fe); } .c4p--add-select .c4p--add-select__selections-row:hover button.c4p--add-select__selections-view-children.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path { fill: currentColor; } .c4p--add-select__sub-header { display: flex; align-items: flex-end; justify-content: space-between; } .c4p--add-select__sub-header-multi { padding: 0 1rem; } .c4p--add-select__sidebar-header { display: flex; padding: 2rem 1rem 0.5rem 1rem; border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0); } .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title { font-size: var(--cds-heading-compact-02-font-size, 1rem); font-weight: var(--cds-heading-compact-02-font-weight, 600); line-height: var(--cds-heading-compact-02-line-height, 1.375); letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0); } .c4p--add-select__sidebar-title { margin-inline-end: 0.5rem; } .c4p--add-select__sidebar-selected-item-title { color: var(--cds-text-primary, #161616); } .c4p--add-select__sidebar-selected-item-subtitle { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); } .c4p--add-select__sidebar-body { padding: 0 1rem; } .c4p--add-select .c4p--add-select__sidebar-item-header { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); margin-block-end: 0.5rem; } .c4p--add-select .c4p--add-select__sidebar-item-body { font-size: var(--cds-body-01-font-size, 0.875rem); font-weight: var(--cds-body-01-font-weight, 400); line-height: var(--cds-body-01-line-height, 1.42857); letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); margin-block-end: 1rem; } .c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover { background: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); } .c4p--add-select .c4p--add-select__sidebar-accordion-title { display: flex; align-items: center; justify-content: space-between; } .c4p--add-select__columns { display: flex; flex-direction: row; flex-grow: 1; } .c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper { margin-inline-start: 0.5rem; } .c4p--add-select__columns .c4p--add-select__selections-row { border-inline-start: 0; } .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell { padding: 0; } .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper { padding: 0 0.5rem; block-size: 2rem; } .c4p--add-select__columns .c4p--add-select__tags { padding: 0 0.5rem; margin-block-end: 0; } .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi { padding: 0; } .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell { padding: 0 1rem; } .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper { border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6); } .c4p--add-select__column { flex: 0 0 20rem; padding: 1rem; border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6); border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6); } .c4p--add-select__column-search-bar { display: flex; } .c4p--add-select__column .cds--popover--tab-tip.cds--popover--open .cds--btn { background: var(--cds-layer); } .c4p--add-select__column-filter-popover.cds--popover-content { padding: 1rem; min-inline-size: 10rem; } .c4p--add-select__column-sort-filter { display: flex; } .c4p--add-select__column .cds--overflow-menu { border-block-end: 1px solid var(--cds-border-strong-01, #8d8d8d); } .c4p--add-select-sort_overflow { z-index: 9999; } .c4p--add-select__tags { display: flex; align-items: center; margin-block: 1rem 0.5rem; } .c4p--add-select__tags-label { margin-inline-end: 0.5rem; } .c4p--add-select__global-filter { position: absolute; z-index: 999999; background: var(--cds-layer-01, #f4f4f4); box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2); inline-size: 100%; inset-inline-end: 0; max-inline-size: 40rem; transform: translate(0, 100%); } .c4p--add-select__global-filter-search { position: relative; display: flex; align-items: flex-end; } .c4p--add-select__global-filter-content { padding: 1rem; } .c4p--add-select__global-filter-opts { display: grid; grid-gap: 1rem 2rem; grid-template-columns: repeat(2, 1fr); } .c4p--add-select__global-filter-applied { display: flex; align-items: center; padding: 0.5rem; background: var(--cds-layer-01, #f4f4f4); } .c4p--add-select__global-filter-button-set button.c4p--add-select__global-filter-button { flex: 1; max-inline-size: none; } button.c4p--add-select__global-filter-toggle { background: var(--cds-field-01, #f4f4f4); border-block-end-color: var(--cds-border-strong-01, #8d8d8d); } button.c4p--add-select__global-filter-toggle--open { border-block-end: var(--cds-border-strong-01, #8d8d8d); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); } .c4p--add-select__meta-panel { padding: 1rem; } .c4p--add-select__meta-panel-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1rem; } .c4p--add-select__meta-panel-entry { margin-block-end: 1rem; } .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-title { font-size: var(--cds-heading-03-font-size, 1.25rem); font-weight: var(--cds-heading-03-font-weight, 400); line-height: var(--cds-heading-03-line-height, 1.4); letter-spacing: var(--cds-heading-03-letter-spacing, 0); } .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-title { font-size: var(--cds-heading-compact-01-font-size, 0.875rem); font-weight: var(--cds-heading-compact-01-font-weight, 600); line-height: var(--cds-heading-compact-01-line-height, 1.28572); letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); } .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); } .c4p--add-select__selections .cds--list-box__menu { inset-inline-start: auto; } .c4p--add-select__tags .cds--tag { margin: 0; } .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer { flex-basis: 22.5rem; background: var(--cds-layer-01, #f4f4f4); } .c4p--add-select.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown { background-color: transparent; } .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description { color: var(--cds-text-secondary, #525252); } .c4p--add-select.c4p--tearsheet .c4p--tearsheet__content { display: flex; flex-direction: column; } .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button { max-inline-size: 11.25rem; } .c4p--add-select .c4p--add-select__items-label { font-size: var(--cds-heading-compact-01-font-size, 0.875rem); font-weight: var(--cds-heading-compact-01-font-weight, 600); line-height: var(--cds-heading-compact-01-line-height, 1.28572); letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); } .c4p--add-select .cds--modal-container--sm .cds--modal-content p { padding-inline-end: 0; } .c4p--add-select .cds--radio-button__appearance { margin: 0 1rem 0 0; } .c4p--add-select .cds--radio-button-wrapper .cds--radio-button__label { justify-content: left; } .c4p--add-select .cds--breadcrumb .cds--link { cursor: pointer; } .c4p--add-select .cds--accordion__item:hover .c4p--add-select__sidebar-accordion-title button { opacity: 1; } .c4p--add-select .cds--accordion__item .c4p--add-select__sidebar-accordion-title button { opacity: 0; } .c4p--add-select__multi .c4p--empty-state { margin-block-start: 3rem; max-inline-size: 16rem; } .c4p--add-select .cds--accordion__arrow { transform: rotate(0deg); } .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow { transform: rotate(90deg); } .c4p--add-select .cds--accordion--start .cds--accordion__arrow { margin: 0 0 0 1rem; } .c4p--add-select .cds--accordion--start .cds--accordion__title { margin: 0 1rem 0 0.5rem; } .c4p--add-select .cds--accordion__item--active .cds--accordion__content { margin-block-start: 0.5rem; padding-block: 0; } /** * Copyright IBM Corp. 2026 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ .c4p--add-select__next { position: relative; display: flex; flex-direction: column; block-size: 100%; inline-size: 100%; } .c4p--add-select__next__body { display: flex; flex-direction: column; block-size: 100%; inline-size: 100%; } .c4p--add-select__next__header { padding: 1rem; border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6); } .c4p--add-select__next__search { margin-block-end: 1rem; } .c4p--add-select__next__search--with-actions { display: flex; align-items: flex-end; } .c4p--add-select__next__search-input { flex: 1; } .c4p--add-select__next__global-actions { display: flex; align-items: flex-end; } .c4p--add-select__next__sub-header { display: flex; align-items: center; justify-content: space-between; } .c4p--add-select__next__tags { display: flex; align-items: center; gap: 0.5rem; } .c4p--add-select__next__tags-label { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); margin: 0; color: var(--cds-text-secondary, #525252); } .c4p--add-select__next__sub-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: 1rem; } .c4p--add-select__next__content { overflow: auto; flex: 1; } .c4p--add-select__next-list { display: flex; flex-direction: column; overflow-y: auto; } @supports (overflow-block: auto) { .c4p--add-select__next-list { overflow-block: auto; } } .c4p--add-select__next-list:focus { outline: none; } .c4p--add-select__next-list-body { display: flex; flex-direction: column; } .c4p--add-select__next-list-body--horizontal { flex-direction: row; } .c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column { padding: 1rem; } .c4p--add-select__next-row { display: flex; border-inline-start: 0.125rem solid transparent; transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .c4p--add-select__next-row:focus { outline: 0.125rem solid var(--cds-focus, #0f62fe); outline-offset: -0.125rem; } .c4p--add-select__next-row:focus:not(:focus-visible) { outline: none; } .c4p--add-select__next-row--selected { background-color: var(--cds-layer-selected-01, #e0e0e0); } .c4p--add-select__next-row--disabled { cursor: not-allowed; opacity: 0.5; } .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) { background: var(--cds-layer-hover-01, #e8e8e8); } .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title { color: var(--cds-interactive, #0f62fe); } .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg { color: var(--cds-interactive, #0f62fe); } .c4p--add-select__next-row__cell { display: flex; flex: 1; flex-direction: column; justify-content: center; } .c4p--add-select__next-row__cell-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; block-size: 3rem; border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0); } .c4p--add-select__next-row__content { display: flex; flex: 1; align-items: center; } .c4p--add-select__next-row__checkbox { flex: none; margin-inline-end: 1rem; } .c4p--add-select__next-row__radio .cds--radio-button__appearance { margin-inline-end: 0; } .c4p--add-select__next-row__icon { display: flex; align-items: center; margin-inline-end: 0.5rem; } .c4p--add-select__next-row__text { display: flex; flex: 1; flex-direction: column; } .c4p--add-select__next-row__title { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); display: block; color: var(--cds-text-primary, #161616); } .c4p--add-select__next-row__subtitle { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); display: block; color: var(--cds-text-secondary, #525252); } .c4p--add-select__next-row__meta { display: flex; align-items: center; margin-inline-start: 0.5rem; } .c4p--add-select__next-row__view-item-panel { margin-inline-start: auto; } .c4p--add-select__next-row-item-panel--selected { background-color: var(--cds-layer-hover-01, #e8e8e8); border-inline-start: 0.125rem solid var(--cds-interactive, #0f62fe); } @media screen and (prefers-reduced-motion: reduce) { .c4p--add-select__next-row__nav-indicator { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 0.25rem; cursor: pointer; margin-inline-start: 0.5rem; transition: none; } .c4p--add-select__next-row__nav-indicator:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); } .c4p--add-select__next-row__nav-indicator:focus { outline: 0.125rem solid var(--cds-focus, #0f62fe); outline-offset: -0.125rem; } .c4p--add-select__next-row__nav-indicator svg { fill: var(--cds-icon-primary, #161616); } } .c4p--add-select__next-row__nav-indicator { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 0.25rem; cursor: pointer; margin-inline-start: 0.5rem; transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .c4p--add-select__next-row__nav-indicator:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); } .c4p--add-select__next-row__nav-indicator:focus { outline: 0.125rem solid var(--cds-focus, #0f62fe); outline-offset: -0.125rem; } .c4p--add-select__next-row__nav-indicator svg { fill: var(--cds-icon-primary, #161616); } .c4p--add-select__next-column { display: flex; flex-direction: column; block-size: 100%; border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6); min-inline-size: 300px; } .c4p--add-select__next-column:last-child { border-inline-end: none; } .c4p--add-select__next-column__search { padding: 1rem; padding-block-end: 0; } .c4p--add-select__next-column__search--with-actions { display: flex; align-items: flex-end; } .c4p--add-select__next-column__search-input { flex: 1; } .c4p--add-select__next-column__actions { display: flex; align-items: flex-end; } .c4p--add-select__next-column__search-bar { padding: 1rem; padding-block-end: 0; } .c4p--add-select__next-column__search-wrapper { display: flex; align-items: center; gap: 0; } .c4p--add-select__next-column__search-input { flex: 1; } .c4p--add-select__next-column__controls { display: flex; align-items: center; gap: 0; } .c4p--add-select__next-column__sort-button, .c4p--add-select__next-column__filter-button { flex: none; } .c4p--add-select__next-column__filter-popover { padding: 1rem; } .c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper { margin-block-end: 0.5rem; } .c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper:last-child { margin-block-end: 0; } .c4p--add-select__next-column__header { display: flex; align-items: center; padding: 1rem; border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6); } .c4p--add-select__next-column__select-all .cds--checkbox-label { display: flex; align-items: center; gap: 0; } .c4p--add-select__next-column__select-all .cds--checkbox-label-text { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: 0.5rem; } .c4p--add-select__next-column__title-wrapper { display: flex; align-items: center; gap: 0.5rem; } .c4p--add-select__next-column__title { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); color: var(--cds-text-secondary, #525252); font-weight: 600; } .c4p--add-select__next-column__rows { display: flex; flex: 1; flex-direction: column; overflow-y: auto; } @supports (overflow-block: auto) { .c4p--add-select__next-column__rows { overflow-block: auto; } } .c4p--add-select__next__breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .c4p--add-select__next__breadcrumb-item { display: flex; align-items: center; gap: 0.25rem; } .c4p--add-select__next__breadcrumb-button { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); padding: 0; border: none; background: none; color: var(--cds-link-primary, #0f62fe); cursor: pointer; text-decoration: none; } .c4p--add-select__next__breadcrumb-button:hover { color: var(--cds-link-primary-hover, #0043ce); text-decoration: underline; } .c4p--add-select__next__breadcrumb-button:focus { outline: 0.125rem solid var(--cds-focus, #0f62fe); outline-offset: 0.125rem; } .c4p--add-select__next__breadcrumb-separator { display: flex; align-items: center; color: var(--cds-text-secondary, #525252); } .c4p--add-select__next__breadcrumb-separator svg { fill: currentColor; } .c4p--add-select__next__breadcrumb-current { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); color: var(--cds-text-primary, #161616); } .c4p--add-select__next__selection-summary { display: flex; flex-direction: column; } .c4p--add-select__next__selection-summary-header { display: flex; align-items: center; padding: 2rem 1rem 0.5rem 1rem; border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0); } .c4p--add-select__next__selection-summary-title { font-size: var(--cds-heading-compact-02-font-size, 1rem); font-weight: var(--cds-heading-compact-02-font-weight, 600); line-height: var(--cds-heading-compact-02-line-height, 1.375); letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0); margin-inline-end: 0.5rem; } .c4p--add-select__next__selection-summary-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; } .c4p--add-select__next__selection-summary-item-default { padding: 1rem 0; border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0); } .c4p--add-select__next__selection-summary-item-default-title { color: var(--cds-text-primary, #161616); } .c4p--add-select__next__selection-summary-item-default-subtitle { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); } .c4p--add-select__next__selection-summary-item { position: relative; } .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 1rem; } .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content { padding-inline: 1rem; } .c4p--add-select__next__selection-summary-item-title-wrapper { display: flex; align-items: center; justify-content: space-between; } .c4p--add-select__next__selection-summary-item-selected-item { flex: 1; } .c4p--add-select__next__selection-summary-item-title { color: var(--cds-text-primary, #161616); } .c4p--add-select__next__selection-summary-item-subtitle { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); } .c4p--add-select__next__selection-summary-item-entry { margin-block-end: 1rem; } .c4p--add-select__next__selection-summary-item-header { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); color: var(--cds-text-secondary, #525252); margin-block-end: 0.5rem; } .c4p--add-select__next__selection-summary-item-body { font-size: var(--cds-body-01-font-size, 0.875rem); font-weight: var(--cds-body-01-font-weight, 400); line-height: var(--cds-body-01-line-height, 1.42857); letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); margin-block-end: 1rem; } .c4p--add-select__next__selection-summary-item-remove-button-container { display: inline-flex; align-items: center; justify-content: center; padding-inline-start: 1rem; } .c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container { position: absolute; inset-inline-end: 0; } .c4p--add-select__next__selection-summary-item--simple .c4p--add-select__next__selection-summary-item-remove-button-container { position: relative; margin-inline-start: auto; } .c4p--add-select__next__selection-summary-item-remove-button { opacity: 0; transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .c4p--add-select__next__selection-summary-item-remove-button { transition: none; } } .c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button, .c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button { opacity: 1; } .c4p--add-select__next__selection-summary-item-content { margin-block-start: 0.5rem; } .c4p--add-select__next__selection-summary .cds--accordion__arrow { transform: rotate(0deg); } .c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__arrow { transform: rotate(90deg); } .c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__arrow { margin: 0 0 0 1rem; } .c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__title { margin: 0 1rem 0 0.5rem; padding-inline-end: 2rem; } .c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__content { margin-block-start: 0.5rem; padding-block: 0; } .c4p--add-select__next__item-summary-panel { padding: 1rem; } .c4p--add-select__next__item-summary-panel-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1rem; } .c4p--add-select__next__item-summary-panel-title { font-size: var(--cds-heading-03-font-size, 1.25rem); font-weight: var(--cds-heading-03-font-weight, 400); line-height: var(--cds-heading-03-line-height, 1.4); letter-spacing: var(--cds-heading-03-letter-spacing, 0); } .c4p--add-select__next__item-summary-panel-entry { margin-block-end: 1rem; } .c4p--add-select__next__item-summary-panel-entry-title { font-size: var(--cds-heading-compact-01-font-size, 0.875rem); font-weight: var(--cds-heading-compact-01-font-weight, 600); line-height: var(--cds-heading-compact-01-line-height, 1.28572); letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); } .c4p--add-select__next__item-summary-panel-entry-body { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); } .c4p--button-menu { min-inline-size: 160px; } .c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open { background-color: var(--cds-button-primary, #0f62fe); } .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover { background-color: var(--cds-button-primary-hover, #0050e6); } .c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open { background-color: var(--cds-button-tertiary, #0f62fe); } .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover { background-color: var(--cds-button-tertiary-hover, #0050e6); } .c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open { background-color: transparent; } .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover { background-color: var(--cds-layer-hover); } .c4p--button-menu .c4p--button-menu__trigger { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; inline-size: 100%; } .c4p--button-menu__options.cds--overflow-menu-options::after { content: initial; } @keyframes cds--hide-feedback { 0% { opacity: 1; visibility: inherit; } 100% { opacity: 0; visibility: hidden; } } @keyframes cds--show-feedback { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: inherit; } } @keyframes cds--skeleton { 0% { opacity: 0.3; transform: scaleX(0); transform-origin: left; } 20% { opacity: 1; transform: scaleX(1); transform-origin: left; } 28% { transform: scaleX(1); transform-origin: right; } 51% { transform: scaleX(0); transform-origin: right; } 58% { transform: scaleX(0); transform-origin: right; } 82% { transform: scaleX(1); transform-origin: right; } 83% { transform: scaleX(1); transform-origin: left; } 96% { transform: scaleX(0); transform-origin: left; } 100% { opacity: 0.3; transform: scaleX(0); transform-origin: left; } } .cds--layout--size-xs { --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-xs { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem)); } .cds--layout-constraint--size__min-xs { --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem); } .cds--layout-constraint--size__max-xs { --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem); } .cds--layout--size-sm { --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-sm { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem)); } .cds--layout-constraint--size__min-sm { --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem); } .cds--layout-constraint--size__max-sm { --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem); } .cds--layout--size-md { --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-md { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem)); } .cds--layout-constraint--size__min-md { --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem); } .cds--layout-constraint--size__max-md { --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem); } .cds--layout--size-lg { --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-lg { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem)); } .cds--layout-constraint--size__min-lg { --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem); } .cds--layout-constraint--size__max-lg { --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem); } .cds--layout--size-xl { --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-xl { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem)); } .cds--layout-constraint--size__min-xl { --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem); } .cds--layout-constraint--size__max-xl { --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem); } .cds--layout--size-2xl { --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem); --cds-layout-size-height: var(--cds-layout-size-height-context); } .cds--layout-constraint--size__default-2xl { --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem)); } .cds--layout-constraint--size__min-2xl { --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem); } .cds--layout-constraint--size__max-2xl { --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem); } .cds--layout--density-condensed { --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem); --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context); } .cds--layout-constraint--density__default-condensed { --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem)); } .cds--layout-constraint--density__min-condensed { --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem); } .cds--layout-constraint--density__max-condensed { --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem); } .cds--layout--density-normal { --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem); --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context); } .cds--layout-constraint--density__default-normal { --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem)); } .cds--layout-constraint--density__min-normal { --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem); } .cds--layout-constraint--density__max-normal { --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem); } :root { --cds-layout-size-height-xs: 1.5rem; --cds-layout-size-height-sm: 2rem; --cds-layout-size-height-md: 2.5rem; --cds-layout-size-height-lg: 3rem; --cds-layout-size-height-xl: 4rem; --cds-layout-size-height-2xl: 5rem; --cds-layout-size-height-min: 0px; --cds-layout-size-height-max: 999999999px; --cds-layout-density-padding-inline-condensed: 0.5rem; --cds-layout-density-padding-inline-normal: 1rem; --cds-layout-density-padding-inline-min: 0px; --cds-layout-density-padding-inline-max: 999999999px; } .cds--assistive-text, .cds--visually-hidden { position: absolute; overflow: hidden; padding: 0; border: 0; margin: -1px; block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; visibility: inherit; white-space: nowrap; } .c4p--card { border: 1px solid transparent; background-color: var(--cds-layer-01, #f4f4f4); color: var(--cds-text-primary, #161616); } .c4p--card__clickable { border-color: var(--cds-border-tile-01, #c6c6c6); cursor: pointer; transition: background-color 110ms; } .c4p--card__clickable:focus { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: -2px; } @media screen and (prefers-contrast) { .c4p--card__clickable:focus { outline-style: dotted; } } .c4p--card__clickable:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); } .c4p--card__media-left { display: flex; flex-direction: row; } .c4p--card__media-left .c4p--card__content-container { display: flex; flex: 1; flex-direction: column; } .c4p--card__media-left .c4p--card__footer { align-self: flex-end; margin-block-start: auto; } .c4p--card__media > * { display: block; max-inline-size: 100%; } .c4p--card__header { padding: 1rem; padding-inline-end: 0; } .c4p--card__header-label-only { padding-block-end: 0.5rem; } .c4p--card__header-label-only .c4p--card__label { margin-block-end: 0; } .c4p--card__header-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .c4p--card__label { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); margin-block-end: 0.125rem; } .c4p--card__description { font-size: var(--cds-label-01-font-size, 0.75rem); font-weight: var(--cds-label-01-font-weight, 400); line-height: var(--cds-label-01-line-height, 1.33333); letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); margin-block-start: 0.125rem; } .c4p--card__body { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); padding: 1rem; padding-block-start: 0; } .c4p--card__footer { display: flex; justify-content: flex-end; } .c4p--card__actions { display: flex; flex-direction: row; } .c4p--card__icon { padding: 0.5rem; color: inherit; cursor: pointer; } .c4p--card__icon:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); } .c4p--card__icon:active { color: var(--cds-link-primary-hover, #0043ce); } .c4p--card__link { color: inherit; text-decoration: inherit; } .c4p--card__pictogram { padding-block-start: 1rem; padding-inline-start: 1rem; } .c4p--card__header-container--has-actions { padding-inline-end: 0.5rem; } .c4p--card { position: relative; } .c4p--card__media + .c4p--card__content-container { /* display relative to container when media displayed */ position: relative; } .c4p--card .cds--slug, .c4p--card .cds--ai-label { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; } .c4p--card__header__inner-wrapper--decorator { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; } .c4p--card__header__inner-wrapper--decorator .cds--slug, .c4p--card__header__inner-wrapper--decorator .cds--ai-label { position: relative; inset-block-start: unset; inset-inline-end: unset; } .c4p--card__header-container--has-slug, .c4p--card__header-container--has-decorator { inline-size: 100%; padding-inline-end: 2rem; } .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions, .c4p--card__header-container--has-decorator.c4p--card__header-container--has-actions { padding-inline-end: 2.5rem; } .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label, .c4p--card__header-container--has-decorator.c4p--card__header-container--large-tile-or-label { padding-inline-end: 3rem; } .c4p--card__clickable { position: relative; } .c4p--card__clickable .cds--slug, .c4p--card__clickable .cds--slug-icon { pointer-events: none; } .c4p--card--has-slug, .c4p--card--has-ai-label { background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; border: 1px solid transparent; box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); } .c4p--card__clickable.c4p--card--has-slug::before, .c4p--card__clickable.c4p--card--has-ai-label::before { background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box; position: absolute; display: block; block-size: 100%; box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)); content: ""; inline-size: 100%; inset-block-start: 0; inset-inline-start: 0; opacity: 0; transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } .c4p--card__clickable.c4p--card--has-slug:hover::before, .c4p--card__clickable.c4p--card--has-ai-label:hover::before { opacity: 1; } .c4p--card__clickable .c4p--card__content-container { position: relative; z-index: 1; } .c4p--card .cds--slug-icon rect { stroke: var(--cds-icon-primary, #161616); } .c4p--card .cds--slug-icon path { fill: var(--cds-icon-primary, #161616); } .c4p--card-next { position: relative; border: 1px solid var(--cds-border-subtle-01, #c6c6c6); background-color: var(--cds-layer-01, #f4f4f4); color: var(--cds-text-primary, #161616); } .c4p--card-next--clickable { cursor: pointer; transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } .c4p--card-next--clickable:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); } .c4p--card-next--clickable:focus { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: -2px; } @media screen and (prefers-contrast) { .c4p--card-next--clickable:focus { outline-style: dotted; } } .c4p--card-next--clickable:active { background-color: var(--cds-layer-active-01, #c6c6c6); } .c4p--card-next--disabled { border-color: var(--cds-border-disabled, #c6c6c6); background-color: var(--cds-layer-01, #f4f4f4); color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); cursor: not-allowed; pointer-events: none; } .c4p--card-next__header { display: flex; flex-direction: column; padding: 1rem; gap: 0.5rem; } .c4p--card-next__body { font-size: var(--cds-body-compact-01-font-size, 0.875rem); font-weight: var(--cds-body-compact-01-font-weight, 400); line-height: var(--cds-body-compact-01-line-height, 1.28572); letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); padding: 1rem; padding-block-start: 0; } .c4p--card-next__footer { disp