.sky-button, .sky-breadcrumbs-collapsed, .sky-breadcrumbs-item, .sky-chip, .sky-fab, .sky-field__clear, .sky-list-button__action, .sky-list-item__row, .sky-navbar-back-link, .sky-searchbar__clear, .sky-searchbar__cancel, .sky-segmented-button, .sky-stepper__button, .sky-tab-button { box-sizing: border-box; border: 0; font: inherit; -webkit-tap-highlight-color: transparent; } .sky-breadcrumbs-collapsed, .sky-breadcrumbs-item, .sky-link, .sky-chip, .sky-fab, .sky-list-button__action, .sky-list-item__row, .sky-navbar-back-link, .sky-segmented-button, .sky-stepper__button, .sky-tab-button { min-height: var(--sky-touch-target, 44px); } .sky-button, .sky-breadcrumbs-collapsed, .sky-breadcrumbs-item, .sky-link, .sky-chip, .sky-fab, .sky-list-button__action, .sky-navbar-back-link, .sky-segmented-button, .sky-stepper__button, .sky-tab-button { display: inline-flex; align-items: center; justify-content: center; color: inherit; cursor: pointer; text-decoration: none; user-select: none; } .sky-button:focus-visible, .sky-breadcrumbs-collapsed:focus-visible, .sky-breadcrumbs-item:focus-visible, .sky-link:focus-visible, .sky-chip:focus-visible, .sky-fab:focus-visible, .sky-field__clear:focus-visible, .sky-list-button__action:focus-visible, .sky-list-item__row:focus-visible, .sky-navbar-back-link:focus-visible, .sky-segmented-button:focus-visible, .sky-stepper__button:focus-visible, .sky-tab-button:focus-visible { outline: 2px solid var(--sky-app-accent, #007aff); outline-offset: 2px; } .sky-button { width: 100%; height: 34px; min-height: 34px; min-width: var(--sky-touch-target, 44px); position: relative; gap: 7px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; background: var(--sky-app-accent, #007aff); color: var(--sky-button-text, #ffffff); font-size: 15px; font-weight: 500; line-height: 1.2; transition: background-color var(--sky-transition-fast, 100ms) ease, border-color var(--sky-transition-fast, 100ms) ease, color var(--sky-transition-fast, 100ms) ease, filter var(--sky-transition-fast, 100ms) ease, opacity var(--sky-transition-fast, 100ms) ease; } .sky-button::before { width: max(100%, var(--sky-touch-target, 44px)); position: absolute; left: 50%; inset-block: -5px; content: ''; transform: translateX(-50%); } .sky-button--primary:active:not(:disabled) { background: var(--sky-app-accent, #007aff); filter: brightness(0.86); } .sky-button--secondary { background: var(--sky-surface-muted, #e6e9ee); color: var(--sky-text, #111827); } .sky-button--danger { background: var(--sky-danger, #dc2626); } .sky-button--plain { background: transparent; color: var(--sky-app-accent, #007aff); } .sky-button--clear { background: transparent; color: var(--sky-app-accent, #007aff); } .sky-button--clear:active:not(:disabled), .sky-button--plain:active:not(:disabled) { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); } .sky-button--tonal { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); color: var(--sky-app-accent, #007aff); } .sky-button--tonal:active:not(:disabled) { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); filter: brightness(0.92); } .sky-button--outline { border-width: 2px; border-color: var(--sky-app-accent, #007aff); background: transparent; color: var(--sky-app-accent, #007aff); } .sky-button--outline:active:not(:disabled) { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); color: var(--sky-app-accent, #007aff); filter: none; } .sky-button--danger.sky-button--outline { border-color: var(--sky-danger, #dc2626); color: var(--sky-danger, #dc2626); } .sky-button--danger.sky-button--outline:active:not(:disabled) { background: var(--sky-danger-soft, rgba(220, 38, 38, 0.14)); color: var(--sky-danger, #dc2626); } .sky-button--rounded { border-radius: var(--sky-radius-pill, 999px); } .sky-button--large { height: 48px; min-height: 48px; font-size: 17px; font-weight: 600; } .sky-button--small { height: 28px; min-height: 28px; padding-inline: 8px; font-size: 14px; } .sky-button--small::before { inset-block: -8px; } .sky-button--large::before { inset-block: 0; } .sky-button--inline { width: auto; min-width: 0; } .sky-button--raised { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .sky-button--raised:active:not(:disabled) { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); } .sky-button--block { width: 100%; } .sky-button--icon-only { width: var(--sky-touch-target, 44px); padding: 0; } .sky-button:disabled, .sky-button[aria-disabled='true'], .sky-link:disabled, .sky-link[aria-disabled='true'], .sky-chip:disabled, .sky-chip[aria-disabled='true'], .sky-tab-button:disabled { cursor: default; opacity: 0.42; } .sky-link { min-width: 0; min-height: 0; position: relative; gap: 4px; padding: 0; border-radius: 0; background: transparent; color: var(--sky-app-accent, #007aff); font-size: inherit; transition: opacity 300ms ease; } .sky-link::before { width: max(100%, var(--sky-touch-target, 44px)); height: max(100%, var(--sky-touch-target, 44px)); position: absolute; top: 50%; left: 50%; content: ''; transform: translate(-50%, -50%); } .sky-link:active:not(:disabled) { opacity: 0.5; transition-duration: 0ms; } .sky-link--icon-only { width: var(--sky-touch-target, 44px); padding: 0; border-radius: 50%; } .sky-navbar__left > .sky-link, .sky-navbar__right > .sky-link, .sky-toolbar-pane > .sky-link { min-height: var(--sky-touch-target, 44px); padding: 0 16px; } .sky-navbar__left > .sky-link--icon-only, .sky-navbar__right > .sky-link--icon-only, .sky-toolbar-pane > .sky-link--icon-only { padding: 0; } .sky-navbar .sky-link, .sky-navbar .sky-navbar-back-link, .sky-toolbar .sky-link { color: inherit; } .sky-badge { min-width: 20px; min-height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: var(--sky-radius-pill, 999px); background: var(--sky-surface-muted, #e6e9ee); color: var(--sky-muted, #64748b); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .sky-badge--primary { background: var(--sky-app-accent, #007aff); color: #ffffff; } .sky-badge--info { background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14)); color: var(--sky-app-accent, #2563eb); } .sky-badge--success { background: rgba(5, 150, 105, 1); color: #ffffff; } .sky-badge--warning { background: rgba(245, 158, 11, 1); color: #ffffff; } .sky-badge--danger { background: rgba(220, 38, 38, 1); color: #ffffff; } .sky-badge--small { min-width: 16px; min-height: 16px; padding: 0 2px; font-size: 10px; } .sky-block { min-width: 0; margin: 32px 0; padding-right: var( --sky-block-gutter-right, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ); padding-left: var( --sky-block-gutter-left, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); color: var(--sky-text, #000000); font-size: 14px; line-height: 20px; } .sky-block--inset { overflow: hidden; margin-right: var( --sky-block-outer-right, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ); margin-left: var( --sky-block-outer-left, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); padding-right: var(--sky-block-inset-gutter, var(--sky-page-gutter)); padding-left: var(--sky-block-inset-gutter, var(--sky-page-gutter)); border-radius: var(--sky-radius-card, 24px); } .sky-block--strong { padding-right: var( --sky-block-strong-gutter, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ); padding-left: var( --sky-block-strong-gutter, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); padding-top: var(--sky-space-4, 16px); padding-bottom: var(--sky-space-4, 16px); background: var(--sky-surface, #ffffff); } .sky-block--outline { border-top: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); border-bottom: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-block--inset.sky-block--outline { border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-block--nested { margin: 0; } .sky-block-title { margin: 32px 0 8px; padding-right: var( --sky-title-gutter-right, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ); padding-left: var( --sky-title-gutter-left, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 17px; font-weight: 600; line-height: 24px; } .sky-block-title--medium, .sky-block-title--large { color: var(--sky-text, #000000); } .sky-block-title--medium { font-size: 20px; line-height: 26px; } .sky-block-title--large { font-size: 22px; line-height: 28px; } .sky-block-title + .sky-block, .sky-block-title + .sky-block-header, .sky-block-title + .sky-block-footer, .sky-block-title + .sky-card, .sky-block-title + .sky-list, .sky-block-title + .sky-table { margin-top: 8px; } .sky-card, .sky-surface { min-width: 0; border: 0; border-radius: var(--sky-radius-card, 24px); background: var(--sky-surface, #ffffff); color: var(--sky-text, #000000); } .sky-card { overflow: hidden; margin: 16px var( --sky-card-outer-right, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ) 16px var( --sky-card-outer-left, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); } .sky-card--outline { border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-card--raised { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16); } .sky-card__content { min-width: 0; padding: var(--sky-space-4, 16px); font-size: 14px; line-height: 20px; } .sky-card__header, .sky-card__footer { min-width: 0; padding: var(--sky-space-4, 16px); font-size: 17px; } .sky-card__footer { color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 14px; } .sky-card__header--divider { border-bottom: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-card__footer--divider { border-top: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-media-card__media { position: relative; min-width: 0; height: 192px; overflow: hidden; padding: var(--sky-space-4, 16px); display: flex; align-items: flex-end; color: var(--sky-media-card-title, #ffffff); background: var(--sky-media-card-media-bg, #314864); } .sky-media-card__visual { position: absolute; inset: 0; } .sky-media-card__visual > img, .sky-media-card__visual > video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--sky-media-card-media-position, center); } .sky-media-card__title { position: relative; z-index: 1; font-size: 14px; line-height: 20px; font-weight: 700; } .sky-media-card__body { min-width: 0; padding: var(--sky-space-4, 16px); font-size: 14px; line-height: 20px; } .sky-media-card__meta { margin-bottom: var(--sky-space-3, 12px); color: var(--sky-muted, rgba(0, 0, 0, 0.55)); } .sky-media-card__copy > :first-child { margin-top: 0; } .sky-media-card__copy > :last-child { margin-bottom: 0; } .sky-media-card__actions { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sky-space-2, 8px); } .sky-status-card { min-width: 0; padding: 14px; display: flex; align-items: center; gap: var(--sky-space-3, 12px); } .sky-status-card__icon { width: 40px; height: 40px; display: inline-grid; flex: none; place-items: center; border-radius: var(--sky-radius-control, 12px); background: var(--sky-surface-muted, #e6e9ee); color: var(--sky-muted, #64748b); } .sky-status-card__copy { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; } .sky-status-card__title, .sky-status-card__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sky-status-card__title { color: var(--sky-text, #111827); font-size: 15px; font-weight: 650; line-height: 20px; } .sky-status-card__subtitle { color: var(--sky-muted, #64748b); font-size: 12px; line-height: 16px; } .sky-status-card__trailing { min-width: 0; display: inline-flex; flex: none; align-items: center; justify-content: flex-end; } .sky-status-card__indicator { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--sky-muted, #64748b); } .sky-status-card--accent .sky-status-card__icon { background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14)); color: var(--sky-app-accent, #3b82f6); } .sky-status-card--accent .sky-status-card__indicator { background: var(--sky-app-accent, #3b82f6); } .sky-status-card--success .sky-status-card__icon { background: var(--sky-success-soft, rgba(5, 150, 105, 0.14)); color: var(--sky-success, #059669); } .sky-status-card--success .sky-status-card__indicator { background: var(--sky-success, #059669); } .sky-status-card--warning .sky-status-card__icon { background: var(--sky-warning-soft, rgba(245, 158, 11, 0.16)); color: var(--sky-warning, #b45309); } .sky-status-card--warning .sky-status-card__indicator { background: var(--sky-warning, #b45309); } .sky-status-card--danger .sky-status-card__icon { background: var(--sky-danger-soft, rgba(220, 38, 38, 0.14)); color: var(--sky-danger, #dc2626); } .sky-status-card--danger .sky-status-card__indicator { background: var(--sky-danger, #dc2626); } .sky-surface { padding: var(--sky-space-4, 16px); } .sky-surface--highlight { border-color: var(--sky-app-accent, #3b82f6); background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14)); } .sky-chip { min-width: 0; height: 28px; min-height: 28px; position: relative; flex: none; padding: 0 12px; border: 0; border-radius: var(--sky-radius-pill, 999px); background: rgba(0, 0, 0, 0.1); color: currentColor; font-size: 14px; font-weight: 400; line-height: 20px; vertical-align: middle; white-space: nowrap; transition: background-color var(--sky-transition-fast, 100ms) ease, border-color var(--sky-transition-fast, 100ms) ease, opacity var(--sky-transition-fast, 100ms) ease; } .sky-ui-provider--dark .sky-chip:not(.sky-chip--outline):not(.sky-chip--selected), .sky-app--dark .sky-chip:not(.sky-chip--outline):not(.sky-chip--selected), .sky-app-page--dark .sky-chip:not(.sky-chip--outline):not(.sky-chip--selected) { background: rgba(255, 255, 255, 0.1); } button.sky-chip, a.sky-chip, .sky-chip--with-delete { cursor: pointer; } button.sky-chip::before, a.sky-chip::before { position: absolute; inset: -8px -4px; content: ''; border-radius: inherit; } .sky-chip--outline { border: 1px solid var(--sky-chip-outline-border, rgba(0, 0, 0, 0.2)); background: transparent; color: var(--sky-chip-outline-text, currentColor); } .sky-ui-provider--dark .sky-chip--outline, .sky-app--dark .sky-chip--outline, .sky-app-page--dark .sky-chip--outline { border-color: var(--sky-chip-outline-border, rgba(255, 255, 255, 0.2)); } .sky-chip--selected { border: 0; background: var(--sky-app-accent, #3b82f6); color: #ffffff; } .sky-chip__media, .sky-chip__delete { display: inline-flex; flex: none; align-items: center; justify-content: center; } .sky-chip__media { margin-block: -4px; margin-inline-end: 4px; margin-inline-start: -12px; } .sky-chip__delete { width: 24px; height: 28px; min-height: 28px; position: relative; margin-block: -4px; margin-inline-end: -8px; margin-inline-start: 4px; opacity: 0.5; } .sky-chip__delete::before { position: absolute; inset: -8px -10px; content: ''; } .sky-chip__delete:active { opacity: 1; } .sky-chip__delete:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; } .sky-chip__delete-icon { width: 16px; height: 16px; display: block; pointer-events: none; } .sky-icon { width: 1.5em; height: 1.5em; display: inline-flex; flex: none; align-items: center; justify-content: center; } .sky-icon > svg { width: 100%; height: 100%; display: block; } .sky-list { margin: 32px 0; padding: 0; list-style: none; } .sky-list__items { width: 100%; margin: 0; padding: 0; list-style: none; } .sky-list--inset { overflow: hidden; margin-right: var( --sky-list-outer-right, calc(var(--sky-page-gutter) + var(--sky-safe-area-right)) ); margin-left: var( --sky-list-outer-left, calc(var(--sky-page-gutter) + var(--sky-safe-area-left)) ); border-radius: var(--sky-radius-card, 24px); } .sky-list--outline { border-top: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); border-bottom: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-list--inset.sky-list--outline { border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); } .sky-list--strong, .sky-list--inset { background: var(--sky-surface, #ffffff); } .sky-list--nested { margin: 0; border: 0; border-radius: 0; } .sky-list--menu { padding: var(--sky-space-1, 4px) 0; } .sky-list--flush { margin: 0; } .sky-list--compact > .sky-list__items > .sky-list-item > .sky-list-item__row > .sky-list-item__content, .sky-list--compact > .sky-list__items > .sky-field > .sky-field__inner { padding-top: 7px; padding-bottom: 7px; } .sky-list-item, .sky-field { position: relative; min-width: 0; margin: 0; padding: 0; list-style: none; } .sky-list-item__row { width: 100%; min-width: 0; display: flex; align-items: center; gap: 0; padding: 0 0 0 calc(var(--sky-safe-area-left) + 16px); background: transparent; color: var(--sky-text, #000000); text-align: left; text-decoration: none; transition: background-color 300ms ease, color 300ms ease; } .sky-list-item--with-actions { display: flex; align-items: stretch; } .sky-list-item--with-actions > .sky-list-item__row { width: auto; flex: 1 1 auto; } .sky-list-item__actions { display: flex; flex: none; align-items: center; gap: var(--sky-space-1, 4px); padding: 0 var(--sky-space-2, 8px); color: var(--sky-muted, rgba(0, 0, 0, 0.55)); } .sky-list-item__actions > .sky-button--clear { color: inherit; } button.sky-list-item__row, a.sky-list-item__row, label.sky-list-item__row { cursor: pointer; } .sky-list-item__row:active { background: var(--sky-pressed, rgba(0, 0, 0, 0.1)); transition-duration: 0ms; } .sky-list-item--active .sky-list-item__row { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); color: var(--sky-app-accent, #007aff); } .sky-list-item--menu.sky-list-item--active .sky-list-item__row { background: var( --sky-menu-list-active-background, var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)) ); color: var(--sky-menu-list-active-text, var(--sky-app-accent, #007aff)); } .sky-list-item--menu { margin: 0 8px; padding: 4px 0; } .sky-list-item--menu .sky-list-item__row { min-height: var(--sky-touch-target, 44px); gap: 16px; border-radius: 16px; padding: 0 0 0 8px; } .sky-list-item--nested .sky-list-item__row, .sky-list--inset > .sky-list__items > .sky-list-item > .sky-list-item__row { padding-left: 16px; } .sky-list-item--dividers:not(.sky-list-item--menu) .sky-list-item__content::after, .sky-list-item--divider:not(.sky-list-item--menu) .sky-list-item__content::after { height: 1px; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); pointer-events: none; transform: scaleY(var(--sky-hairline-scale, 1)); transform-origin: center bottom; } .sky-list > .sky-list__items > .sky-list-item:last-child > .sky-list-item__row > .sky-list-item__content::after { display: none; } .sky-list-item--group-title { height: 32px; min-height: 32px; display: flex; align-items: center; margin-top: -1px; padding-right: calc(var(--sky-page-gutter) + var(--sky-safe-area-right)); padding-left: calc(var(--sky-page-gutter) + var(--sky-safe-area-left)); background: var(--sky-surface-variant, #f4f4f4); color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 17px; font-weight: 400; } .sky-list-item--group-title.sky-list-item--dividers::before { height: 1px; position: absolute; top: 0; right: 0; left: 0; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); transform: scaleY(var(--sky-hairline-scale, 1)); transform-origin: center top; } .sky-list-item--group-title.sky-list-item--contacts { position: sticky; z-index: 3; top: 0; background: var(--sky-list-group-title-contacts-background, #f4f4f4); color: var(--sky-list-group-title-contacts-text, rgba(0, 0, 0, 0.9)); font-weight: 600; } .sky-list-item--disabled { opacity: 0.45; } .sky-list-item__media, .sky-list-item__after { display: inline-flex; flex: none; align-items: center; justify-content: center; } .sky-list-item__media { margin-right: 16px; padding: 8px 0; color: var(--sky-app-accent, #3b82f6); } .sky-list-item__content { width: 100%; min-width: 0; position: relative; display: flex; flex: 1; align-self: stretch; justify-content: center; flex-direction: column; gap: 2px; padding: 12px calc(var(--sky-safe-area-right) + 16px) 12px 0; } .sky-list-item--nested .sky-list-item__content, .sky-list--inset > .sky-list__items > .sky-list-item > .sky-list-item__row > .sky-list-item__content { padding-right: 16px; } .sky-list-item--menu .sky-list-item__media { margin-right: 0; padding: 8px 0; } .sky-list-item--menu .sky-list-item__content { width: 100%; align-self: stretch; justify-content: center; gap: 0; padding: 12px 16px 12px 0; } .sky-list-item__title-wrap { min-width: 0; min-height: 28px; display: flex; align-items: center; gap: 8px; } .sky-list-item__header { overflow: hidden; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 12px; font-weight: 400; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; } .sky-list-item__title { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--sky-list-item-title-color, inherit); font-size: 17px; font-weight: 400; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; } .sky-list-item__title--strong { font-weight: 600; } .sky-list-item__subtitle { display: -webkit-box; overflow: hidden; color: var(--sky-text, #000000); font-size: 14px; line-height: 19px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sky-list-item__text { display: -webkit-box; overflow: hidden; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 14px; line-height: 19px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sky-list-item__footer { overflow: hidden; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .sky-list-item__after { max-width: 42%; margin-left: auto; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 14px; text-align: right; } .sky-list-item__after > .sky-toggle { margin-block: -8px; } .sky-list-item__chevron { width: 8px; height: 8px; flex: none; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; color: var(--sky-text, #000000); opacity: 0.2; transform: rotate(45deg); } .sky-field { width: 100%; min-width: 0; display: flex; align-items: center; padding-left: calc(16px + var(--sky-safe-area-left, 0px)); background: transparent; color: var(--sky-text, #000000); } .sky-field--outline { margin: 16px 0; padding-right: calc(16px + var(--sky-safe-area-right, 0px)); padding-left: calc(32px + var(--sky-safe-area-left, 0px)); } .sky-field__media, .sky-field__leading { min-width: 0; display: inline-flex; flex: none; align-items: center; position: relative; z-index: 1; margin-right: 16px; padding: 8px 0; color: inherit; } .sky-field__inner { min-width: 0; position: relative; z-index: 1; display: block; flex: 1 1 auto; align-self: stretch; padding: 12px calc(16px + var(--sky-safe-area-right, 0px)) 12px 0; } .sky-field__label { display: block; max-width: 100%; margin: 0; color: inherit; font-size: 12px; font-weight: 400; line-height: 16px; transition: transform 200ms ease; } .sky-field__label-text { display: block; } .sky-field--outline .sky-field__label { display: flex; margin-top: -16px; } .sky-field--outline .sky-field__label-text { position: relative; z-index: 2; top: -4px; display: block; margin: -4px; padding: 4px; background: var(--sky-surface, #ffffff); } .sky-field__control { min-width: 0; position: relative; display: flex; align-items: center; margin-bottom: -10px; } .sky-field:not(.sky-field--outline):not(.sky-field--has-label) .sky-field__control, .sky-field--outline .sky-field__control { margin-top: -10px; } .sky-field__input { box-sizing: border-box; width: 100%; min-width: 0; height: 40px; min-height: 40px; display: block; padding: 0; flex: 1 1 auto; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--sky-text, #000000); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; appearance: none; } .sky-field__input::placeholder { color: var(--sky-field-placeholder, rgba(0, 0, 0, 0.3)); opacity: 1; } .sky-field--floating-label:not(.sky-field--inline) .sky-field__label { max-width: 66%; pointer-events: none; transform: translateY(16px) scale(1.33); transform-origin: left center; } .sky-field--floating-label.sky-field--floating-raised:not(.sky-field--inline) .sky-field__label { transform: none; } .sky-field--floating-label:not(.sky-field--floating-raised):not( .sky-field--inline ) .sky-field__input::placeholder { color: transparent; opacity: 0; } .sky-field--floating-label .sky-field__select option { color: var(--sky-text, #000000); } .sky-field--floating-label.sky-field--outline:not( .sky-field--floating-raised ):not(.sky-field--inline) .sky-field__label { transform: translateY(24px) scale(1.33); } .sky-field__border { position: absolute; z-index: 0; inset: 0 calc(16px + var(--sky-safe-area-right, 0px)) 0 calc(16px + var(--sky-safe-area-left, 0px)); border: 1px solid var(--sky-field-outline, rgba(0, 0, 0, 0.3)); border-radius: 8px; pointer-events: none; transition: border-color 200ms ease; } .sky-field--outline:focus-within .sky-field__border { border-color: var(--sky-app-accent, #007aff); } .sky-list--dividers > .sky-list__items > .sky-field:not(.sky-field--outline) .sky-field__inner::after { width: 100%; height: 1px; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); pointer-events: none; transform: scaleY(var(--sky-hairline-scale, 1)); transform-origin: center bottom; } .sky-list--dividers > .sky-list__items > .sky-field:last-child:not(.sky-field--outline) .sky-field__inner::after { display: none; } .sky-field__select { cursor: pointer; } .sky-field__select:disabled { cursor: default; } .sky-field__textarea { min-height: 40px; padding: 8px 0; resize: vertical; } .sky-field__trailing { min-width: 0; display: inline-flex; flex: none; align-items: center; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); } .sky-field__dropdown { width: 8px; height: 5px; position: absolute; top: 50%; right: 0; color: inherit; opacity: 0.5; pointer-events: none; transform: translateY(-50%); } .sky-field__clear { width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); position: absolute; z-index: 2; top: 50%; right: -15px; display: grid; place-items: center; border-radius: 50%; background: transparent; cursor: pointer; transform: translateY(-50%); } .sky-field__clear > span { width: 14px; height: 14px; position: relative; display: block; border-radius: 50%; background: var(--sky-muted, #64748b); } .sky-field__clear > span::before, .sky-field__clear > span::after { width: 7px; height: 1px; position: absolute; top: 6.5px; left: 3.5px; content: ''; border-radius: 2px; background: var(--sky-surface, #ffffff); } .sky-field__clear > span::before { transform: rotate(45deg); } .sky-field__clear > span::after { transform: rotate(-45deg); } .sky-field__clear:disabled { cursor: default; opacity: 0.42; } .sky-field__input[type='number'] { appearance: textfield; } .sky-field__input[type='number']::-webkit-inner-spin-button, .sky-field__input[type='number']::-webkit-outer-spin-button { margin: 0; appearance: none; } .sky-field__help, .sky-field__error, .sky-field__info { display: block; position: relative; z-index: 1; margin-top: 4px; font-size: 12px; line-height: 16px; } .sky-field__help { color: var(--sky-muted, #64748b); } .sky-field__info { color: inherit; opacity: 0.5; } .sky-field__error, .sky-field--error .sky-field__label { color: var(--sky-danger, #dc2626); } .sky-field--error .sky-field__border { border-color: var(--sky-danger, #dc2626); } .sky-field--disabled { opacity: 0.45; } .sky-searchbar { width: 100%; min-width: 0; min-height: var(--sky-touch-target, 44px); position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: 8px; padding: 0; background: transparent; } .sky-searchbar__control { min-width: 0; min-height: var(--sky-touch-target, 44px); position: relative; display: flex; flex: 1; align-items: center; gap: 8px; overflow: hidden; padding: 0 4px 0 16px; border: 1px solid transparent; border-radius: var(--sky-radius-pill, 999px); transition: background-color var(--sky-transition-normal, 200ms) ease, border-color var(--sky-transition-normal, 200ms) ease; } .sky-searchbar--focused .sky-searchbar__control { border-color: var(--sky-app-accent, #007aff); } .sky-searchbar__icon { width: 18px; height: 18px; display: block; flex: none; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); fill: currentColor; opacity: 0.72; } .sky-searchbar__input { min-width: 0; min-height: var(--sky-touch-target, 44px); padding: 0 4px; flex: 1; border: 0; outline: 0; -webkit-appearance: none; appearance: none; background: transparent; color: var(--sky-text, #000000); font: inherit; font-size: 17px; } .sky-searchbar__input::-webkit-search-cancel-button { display: none; } .sky-searchbar__input::placeholder { color: var(--sky-muted, rgba(0, 0, 0, 0.55)); opacity: 0.55; } .sky-searchbar__suffix { width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); display: grid; flex: none; place-items: center; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); } .sky-searchbar__clear { width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); position: relative; display: grid; flex: none; place-items: center; border-radius: 50%; background: transparent; cursor: pointer; } .sky-searchbar__clear > span { width: 18px; height: 18px; position: relative; display: block; border-radius: 50%; background: var(--sky-muted, rgba(0, 0, 0, 0.55)); } .sky-searchbar__clear > span::before, .sky-searchbar__clear > span::after { width: 9px; height: 1.5px; position: absolute; top: 8px; left: 4.5px; content: ''; border-radius: 2px; background: var(--sky-surface, #ffffff); } .sky-searchbar__clear > span::before { transform: rotate(45deg); } .sky-searchbar__clear > span::after { transform: rotate(-45deg); } .sky-searchbar--disabled { opacity: 0.45; } .sky-searchbar__cancel { min-width: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); flex: none; padding: 0 6px; border: 0; border-radius: var(--sky-radius-pill, 999px); background: transparent; color: var(--sky-app-accent, #007aff); font: inherit; font-size: 17px; cursor: pointer; } .sky-searchbar__cancel:active:not(:disabled) { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); } .sky-searchbar__cancel:focus-visible { outline: 2px solid var(--sky-app-accent, #007aff); outline-offset: 2px; } .sky-searchbar__disable-icon { width: 16px; height: 16px; position: relative; display: block; } .sky-searchbar__disable-icon::before, .sky-searchbar__disable-icon::after { width: 16px; height: 2px; position: absolute; top: 7px; left: 0; content: ''; border-radius: var(--sky-radius-pill, 999px); background: currentColor; } .sky-searchbar__disable-icon::before { transform: rotate(45deg); } .sky-searchbar__disable-icon::after { transform: rotate(-45deg); } .sky-toggle, .sky-radio { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; -webkit-user-select: none; user-select: none; vertical-align: middle; } .sky-toggle { min-width: 64px; min-height: 28px; } .sky-radio { min-width: 22px; min-height: 22px; } .sky-toggle__input, .sky-radio__input { width: 100%; height: 100%; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; } .sky-toggle__input { height: var(--sky-touch-target, 44px); top: 50%; bottom: auto; transform: translateY(-50%); } .sky-radio__input { width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); inset: 50% auto auto; inset-inline-start: -11px; transform: translateY(-50%); } .sky-toggle__track { width: 64px; height: 28px; position: relative; flex: none; border: 0; border-radius: var(--sky-radius-pill, 999px); background: transparent; } .sky-toggle__thumb-side, .sky-toggle__thumb-bg, .sky-toggle__thumb-shadow, .sky-toggle__thumb-wrap, .sky-toggle__thumb { position: absolute; transition-duration: 300ms; } .sky-toggle__thumb-side { width: 28px; height: 28px; top: 0; inset-inline-start: 0; border-radius: var(--sky-radius-pill, 999px); background: var(--sky-toggle-track, #f1f1f5); transform: translateX(32px); transition-property: background-color, transform; } [dir='rtl'] .sky-toggle__thumb-side, .sky-toggle[dir='rtl'] .sky-toggle__thumb-side { transform: translateX(-32px); } .sky-toggle__thumb-bg { inset: 0; border-radius: var(--sky-radius-pill, 999px); background: var(--sky-toggle-track, #f1f1f5); transition-property: background-color, transform; } .sky-toggle__thumb-shadow { width: 1px; height: 1px; top: 50%; inset-inline-start: 0; border-radius: 50%; box-shadow: 0 0 40px var(--sky-toggle-glow-spread, 10px) var(--sky-app-accent, #007aff); opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } [dir='rtl'] .sky-toggle__thumb-shadow, .sky-toggle[dir='rtl'] .sky-toggle__thumb-shadow { transform: translateX(-20px); } .sky-toggle__thumb-wrap { width: 38px; height: 24px; top: 2px; inset-inline-start: 2px; border-radius: var(--sky-radius-pill, 999px); background: #ffffff; box-shadow: var(--sky-shadow-thumb); transform-origin: center; transition-property: background-color, box-shadow, transform; } .sky-toggle__thumb { inset: 0; border-radius: inherit; background: var(--sky-glass-thumb-active-background, transparent); box-shadow: var(--sky-shadow-glass-thumb); opacity: 0; transition-property: opacity; } .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb-bg { transform: scale(var(--sky-toggle-hold-track-scale, 0.75)); } .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb-shadow { opacity: var( --sky-toggle-hold-glow-opacity, var(--sky-toggle-glow-opacity, 0.75) ); } .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb { opacity: var(--sky-toggle-hold-glass-opacity, 1); } .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb-wrap { background: var(--sky-toggle-hold-background, transparent); transform: scale(var(--sky-hold-thumb-scale, 1.4)); } .sky-toggle--checked .sky-toggle__thumb-side, .sky-toggle--checked .sky-toggle__thumb-bg { background: var(--sky-app-accent, #007aff); } .sky-toggle--checked .sky-toggle__thumb-side { transform: none; } .sky-toggle--checked[dir='rtl'] .sky-toggle__thumb-side { transform: none; } .sky-toggle--checked .sky-toggle__thumb-shadow { transform: translateX(42px); } [dir='rtl'] .sky-toggle--checked .sky-toggle__thumb-shadow, .sky-toggle--checked[dir='rtl'] .sky-toggle__thumb-shadow { transform: translateX(-42px); } .sky-toggle--checked .sky-toggle__thumb-wrap { transform: translateX(22px); } [dir='rtl'] .sky-toggle--checked .sky-toggle__thumb-wrap, .sky-toggle--checked[dir='rtl'] .sky-toggle__thumb-wrap { transform: translateX(-22px); } .sky-toggle--checked:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap { transform: translateX(22px) scale(var(--sky-hold-thumb-scale, 1.4)); } [dir='rtl'] .sky-toggle--checked:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap, .sky-toggle--checked[dir='rtl']:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap { transform: translateX(-22px) scale(var(--sky-hold-thumb-scale, 1.4)); } .sky-toggle__input:focus-visible + .sky-toggle__track, .sky-radio__input:focus-visible + .sky-radio__mark { outline: 2px solid var(--sky-app-accent, #007aff); outline-offset: 2px; } .sky-toggle--disabled, .sky-toggle--readonly, .sky-radio--disabled { cursor: default; opacity: 0.45; } .sky-toggle__label, .sky-radio__label { color: var(--sky-text, #000000); font-size: 17px; } .sky-radio__mark { width: 22px; height: 22px; position: relative; flex: none; border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); border-radius: 50%; background: var(--sky-surface, #ffffff); } .sky-radio--checked .sky-radio__mark { border-color: var(--sky-app-accent, #007aff); } .sky-radio--checked .sky-radio__mark::after { width: 10px; height: 6px; position: absolute; top: 5px; left: 5px; content: ''; border-bottom: 2px solid var(--sky-app-accent, #007aff); border-left: 2px solid var(--sky-app-accent, #007aff); transform: rotate(-45deg); } .sky-range { min-width: 0; min-height: 28px; position: relative; display: flex; align-items: center; gap: 9px; } .sky-range::before { width: 100%; height: var(--sky-touch-target, 44px); position: absolute; top: 50%; left: 0; content: ''; transform: translateY(-50%); } .sky-range--captioned { position: relative; } .sky-range__caption { position: absolute; z-index: 1; top: 2px; left: 0; color: var(--sky-muted, #64748b); font-size: 11px; font-weight: 600; line-height: 15px; pointer-events: none; } .sky-range--captioned .sky-range__input { padding-top: 14px; } .sky-range--captioned .sky-range__label { transform: translateY(7px); } .sky-range__input { width: 100%; min-width: 0; height: 28px; position: relative; z-index: 1; margin: 0; padding: 0; flex: 1; appearance: none; outline: 0; background: transparent; cursor: pointer; } .sky-range__input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient( to right, var(--sky-app-accent, #007aff) 0, var(--sky-app-accent, #007aff) var(--sky-range-progress), var(--sky-subtle, rgba(0, 0, 0, 0.3)) var(--sky-range-progress), var(--sky-subtle, rgba(0, 0, 0, 0.3)) 100% ); } .sky-range__input::-webkit-slider-thumb { width: 38px; height: 24px; margin-top: -9px; appearance: none; border: 0; border-radius: var(--sky-radius-pill, 999px); background: #ffffff; box-shadow: var(--sky-shadow-thumb); transition: box-shadow 300ms ease, transform 300ms var(--sky-ease-out, ease-out); } .sky-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)), var(--sky-shadow-thumb); } .sky-range__input:not(:disabled):active::-webkit-slider-thumb { background: var( --sky-range-hold-background, var(--sky-glass-thumb-active-background, rgba(255, 255, 255, 0)) ); box-shadow: var( --sky-range-hold-shadow, var(--sky-shadow-thumb), var(--sky-shadow-glass-thumb), var(--sky-shadow-glass-thumb-glow) ); transform: scale(var(--sky-hold-thumb-scale, 1.4)); } .sky-range__input:not(:disabled):focus-visible:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)), var( --sky-range-hold-shadow, var(--sky-shadow-thumb), var(--sky-shadow-glass-thumb), var(--sky-shadow-glass-thumb-glow) ); } .sky-range--disabled { cursor: default; opacity: 0.45; } .sky-range--disabled .sky-range__input { cursor: default; } .sky-range__label { color: var(--sky-muted, #64748b); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .sky-segmented { min-width: 0; height: 34px; min-height: 34px; position: relative; display: flex; align-items: stretch; gap: 0; overflow: visible; padding: 0; border: 0; border-radius: 4px; background: transparent; } .sky-segmented--outline { padding: 0; border: 2px solid var(--sky-app-accent, #007aff); background: transparent; } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) { height: 38px; min-height: 38px; gap: 4px; padding: 2px; background: rgba(0, 0, 0, 0.05); } .sky-ui-provider--dark .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ), .sky-app--dark .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ), .sky-app-page--dark .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) { background: rgba(255, 255, 255, 0.1); } .sky-segmented--raised { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); } .sky-segmented--rounded { border-radius: var(--sky-radius-pill, 999px); } .sky-segmented-button { min-width: 0; height: 34px; min-height: 34px; position: relative; padding: 0 8px; flex: 1 1 0; border-radius: 4px; background: transparent; color: var(--sky-app-accent, #007aff); font-size: 15px; font-weight: 500; } .sky-segmented:not(.sky-segmented--navigation):not(.sky-segmented--navbar) .sky-segmented-button::before { content: ''; position: absolute; inset-block: -5px; inset-inline: 0; } .sky-segmented--rounded .sky-segmented-button { border-radius: var(--sky-radius-pill, 999px); } .sky-segmented:not(.sky-segmented--strong):not(.sky-segmented--outline):not( .sky-segmented--navigation ):not(.sky-segmented--navbar) .sky-segmented-button { border-radius: 0; } .sky-segmented:not(.sky-segmented--strong):not(.sky-segmented--outline):not( .sky-segmented--navigation ):not(.sky-segmented--navbar) .sky-segmented-button:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; } .sky-segmented:not(.sky-segmented--strong):not(.sky-segmented--outline):not( .sky-segmented--navigation ):not(.sky-segmented--navbar) .sky-segmented-button:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; } .sky-segmented--rounded:not(.sky-segmented--strong):not( .sky-segmented--outline ):not(.sky-segmented--navigation):not(.sky-segmented--navbar) .sky-segmented-button:first-child { border-start-start-radius: var(--sky-radius-pill, 999px); border-end-start-radius: var(--sky-radius-pill, 999px); } .sky-segmented--rounded:not(.sky-segmented--strong):not( .sky-segmented--outline ):not(.sky-segmented--navigation):not(.sky-segmented--navbar) .sky-segmented-button:last-child { border-start-end-radius: var(--sky-radius-pill, 999px); border-end-end-radius: var(--sky-radius-pill, 999px); } .sky-segmented--outline:not(.sky-segmented--navigation) .sky-segmented-button + .sky-segmented-button { border-left: 2px solid var(--sky-app-accent, #007aff); } .sky-segmented--outline:not(.sky-segmented--navigation) .sky-segmented-button { margin-block: -2px; border-radius: 0; } .sky-segmented--outline.sky-segmented--rounded .sky-segmented-button:first-child { border-start-start-radius: var(--sky-radius-pill, 999px); border-end-start-radius: var(--sky-radius-pill, 999px); } .sky-segmented--outline.sky-segmented--rounded .sky-segmented-button:last-child { border-start-end-radius: var(--sky-radius-pill, 999px); border-end-end-radius: var(--sky-radius-pill, 999px); } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) .sky-segmented-button { color: var(--sky-text, #000000); } .sky-segmented:not(.sky-segmented--navigation):not(.sky-segmented--navbar) .sky-segmented-button--active { background: var(--sky-app-accent, #007aff); color: #ffffff; } .sky-glass.sky-segmented--navigation { height: 56px; min-height: 56px; position: relative; gap: 4px; padding: 4px; overflow: hidden; border: 0; border-radius: var(--sky-radius-pill, 999px); touch-action: manipulation; } .sky-glass.sky-segmented--navbar { height: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); position: relative; gap: 4px; padding: 0 4px; overflow: hidden; border: 0; border-radius: var(--sky-radius-pill, 999px); touch-action: manipulation; } .sky-segmented--navbar .sky-segmented-button { z-index: 1; height: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); padding: 0 8px; border-radius: var(--sky-radius-pill, 999px); overflow: hidden; background: transparent; color: var(--sky-app-accent, #007aff); font-size: 15px; font-weight: 500; line-height: 22.5px; transition: background-color var(--sky-transition-fast, 100ms) ease, color var(--sky-transition-normal, 200ms) ease; } .sky-segmented--navbar.sky-segmented--strong .sky-segmented-button:not(.sky-segmented-button--active) { color: inherit; } .sky-segmented--navbar .sky-segmented-button--active { background: transparent; color: #000000; box-shadow: none; } .sky-segmented--navbar .sky-segmented-button:active:not(:disabled) { background: var(--sky-pressed, rgba(0, 0, 0, 0.1)); transition-duration: 0ms; } .sky-segmented--navbar .sky-segmented__highlight { top: 5px; bottom: 5px; background: #ffffff; } .sky-ui-provider--dark .sky-segmented--navbar .sky-segmented__highlight, .sky-app--dark .sky-segmented--navbar .sky-segmented__highlight, .sky-app-page--dark .sky-segmented--navbar .sky-segmented__highlight { background: rgba(255, 255, 255, 0.75); } .sky-segmented--navigation .sky-segmented-button { z-index: 1; height: 48px; min-height: 48px; padding: 0 8px; flex-direction: column; gap: 2px; border-radius: var(--sky-radius-pill, 999px); overflow: hidden; background: transparent; color: #8e8e93; font-size: 10px; font-weight: 600; line-height: 1; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--sky-transition-fast, 100ms) ease, color var(--sky-transition-normal, 200ms) ease; } .sky-segmented--navigation .sky-segmented-button--active { background: transparent; color: var(--sky-app-accent, #007aff); box-shadow: none; } .sky-segmented--navigation .sky-segmented-button:active:not(:disabled) { background: var(--sky-pressed, rgba(0, 0, 0, 0.1)); transition-duration: 0ms; } .sky-glass.sky-segmented--navigation.sky-segmented--compact { height: 48px; min-height: 48px; padding-block: 2px; } .sky-segmented--navigation.sky-segmented--compact .sky-segmented-button { height: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); flex-direction: row; gap: 0; font-size: 15px; font-weight: 500; line-height: 20px; } .sky-segmented--compact .sky-segmented__highlight { top: 2px; bottom: 2px; } .sky-segmented__highlight { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; margin: 0; border-radius: var(--sky-radius-pill, 999px); background: #e5e5ea; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); pointer-events: none; transform: translateX(var(--sky-segmented-indicator-offset, 0)); transition: transform var(--sky-transition-normal, 200ms) ease; } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) .sky-segmented__highlight { top: 2px; bottom: 2px; inset-inline-start: 2px; border-radius: inherit; background: var(--sky-segmented-strong-highlight, #ffffff); } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) .sky-segmented-button { z-index: 1; } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) .sky-segmented-button--active { background: transparent; color: #000000; box-shadow: none; } .sky-segmented--strong:not(.sky-segmented--navigation):not( .sky-segmented--navbar ) .sky-segmented-button:active:not(:disabled) { background: var(--sky-pressed, rgba(0, 0, 0, 0.1)); } .sky-ui-provider--dark .sky-segmented__highlight, .sky-app--dark .sky-segmented__highlight, .sky-app-page--dark .sky-segmented__highlight { background: #2c2c2e; } [dir='rtl'] .sky-segmented__highlight, .sky-segmented[dir='rtl'] .sky-segmented__highlight { transform: translateX(var(--sky-segmented-indicator-offset-rtl, 0)); } .sky-segmented-button:disabled { cursor: default; opacity: 0.4; } .sky-spinner { width: 32px; height: 32px; position: relative; display: inline-block; flex: none; } .sky-spinner__svg { width: 100%; height: 100%; display: block; animation: sky-spinner-spin 1s steps(8, end) infinite; } @keyframes sky-spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .sky-progress { width: 100%; height: 6px; position: relative; overflow: hidden; border-radius: 999px; background: transparent; color: var(--sky-app-accent, #007aff); } .sky-progress::before { position: absolute; inset: 0; content: ''; border-radius: inherit; background: var(--sky-progress-track-color, #000000); opacity: 0.1; } .sky-progress__value { width: 100%; height: 100%; position: relative; z-index: 1; display: block; border-radius: inherit; background: currentColor; transition: transform 200ms ease; } [dir='rtl'] .sky-progress, .sky-progress[dir='rtl'] { transform: rotate(180deg); } .sky-tab-button { min-width: 0; min-height: var(--sky-tabbar-pane-height, 48px); position: relative; flex: 1 1 0; flex-direction: column; gap: 0; padding: 4px 8px; border-radius: 0; background: transparent; color: var(--sky-muted, #64748b); } .sky-tab-button--active { color: var(--sky-app-accent, #3b82f6); } .sky-tabbar .sky-tab-button { color: var(--sky-text, #000000); } .sky-tabbar .sky-tab-button--active { color: var(--sky-app-accent, #3b82f6); } .sky-tab-button:active:not(:disabled) { background: transparent; } .sky-tab-button__icon { width: 28px; height: 28px; position: relative; display: inline-flex; align-items: center; justify-content: center; } .sky-tab-button__label { max-width: 100%; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; } .sky-tabbar .sky-tab-button__icon + .sky-tab-button__label { font-size: 12px; font-weight: 500; line-height: 16px; } .sky-tab-button__icon, .sky-tab-button__label { z-index: 1; } .sky-block-header, .sky-block-footer { min-width: 0; display: flex; align-items: center; padding-right: calc(var(--sky-safe-area-right, 0px) + 16px); padding-left: calc(var(--sky-safe-area-left, 0px) + 16px); color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 14px; line-height: 20px; } .sky-block-header { justify-content: space-between; margin: 32px 0 -24px; } .sky-block-footer { margin: -24px 0 32px; } .sky-block-header--inset, .sky-block-footer--inset { padding-right: calc(var(--sky-safe-area-right, 0px) + 32px); padding-left: calc(var(--sky-safe-area-left, 0px) + 32px); } .sky-breadcrumbs { min-width: 0; height: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); display: flex; align-items: center; justify-content: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; margin-block: -6px; padding: 10px 0; box-sizing: border-box; font-size: 17px; line-height: 24px; scrollbar-width: none; white-space: nowrap; } .sky-breadcrumbs::-webkit-scrollbar { display: none; } .sky-breadcrumbs-item, .sky-breadcrumbs-collapsed { flex: none; background: transparent; font-size: 17px; line-height: 24px; transition: background-color 300ms ease, color 300ms ease, opacity 300ms ease; } .sky-breadcrumbs-item { color: var(--sky-app-accent, #007aff); } .sky-breadcrumbs-item--active { color: var(--sky-text, #000000); cursor: default; font-weight: 600; } .sky-breadcrumbs-item--disabled, .sky-breadcrumbs-collapsed--disabled { cursor: default; opacity: 0.42; } .sky-breadcrumbs-separator { width: 12px; min-width: 12px; display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--sky-text, #000000); opacity: 0.35; } .sky-breadcrumbs-separator__icon { width: 7px; height: 7px; display: block; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .sky-breadcrumbs-collapsed { width: var(--sky-touch-target, 44px); min-width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); position: relative; gap: 3px; margin-inline: -7px; padding: 0; color: var(--sky-text, #000000); } .sky-breadcrumbs-collapsed::before { content: ''; width: 30px; height: 17px; position: absolute; top: 50%; left: 50%; border-radius: 4px; background: rgba(0, 0, 0, 0.15); transform: translate(-50%, -50%); } .sky-ui-provider--dark .sky-breadcrumbs-collapsed::before, .sky-app--dark .sky-breadcrumbs-collapsed::before, .sky-app-page--dark .sky-breadcrumbs-collapsed::before { background: rgba(255, 255, 255, 0.15); } .sky-breadcrumbs-collapsed:active:not(:disabled) { opacity: 0.3; transition-duration: 0ms; } .sky-breadcrumbs-item:active:not(:disabled) { opacity: 0.5; transition-duration: 0ms; } .sky-breadcrumbs-collapsed__dot { width: 4px; height: 4px; position: relative; z-index: 1; border-radius: 50%; background: currentColor; } .sky-checkbox { min-width: 22px; min-height: 22px; position: relative; display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; cursor: pointer; } .sky-checkbox__input { width: var(--sky-touch-target, 44px); height: var(--sky-touch-target, 44px); position: absolute; top: 50%; bottom: auto; inset-inline-start: -11px; margin: 0; opacity: 0; cursor: inherit; transform: translateY(-50%); } .sky-checkbox__mark { width: 22px; height: 22px; position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; border: 1px solid var(--sky-subtle, rgba(0, 0, 0, 0.3)); border-radius: 50%; background: transparent; color: #ffffff; } .sky-checkbox--checked .sky-checkbox__mark { border-color: var(--sky-app-accent, #007aff); background: var(--sky-app-accent, #007aff); } .sky-checkbox__check { width: 10px; height: 6px; margin-top: -2px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-45deg); transition: opacity var(--sky-transition-fast, 100ms) ease; } .sky-checkbox:not(.sky-checkbox--checked) .sky-checkbox__check { opacity: 0; } .sky-checkbox__indeterminate { width: 75%; height: 2px; border-radius: var(--sky-radius-pill, 999px); background: currentColor; } .sky-checkbox__label { color: var(--sky-text, #000000); font-size: 17px; } .sky-checkbox__input:focus-visible + .sky-checkbox__mark { outline: 2px solid var(--sky-app-accent, #007aff); outline-offset: 2px; } .sky-checkbox--disabled, .sky-checkbox--readonly { cursor: default; opacity: 0.45; } .sky-glass.sky-fab { min-width: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); gap: 8px; overflow: hidden; padding: 0 16px; border: 0; border-radius: var(--sky-radius-pill, 999px); background: transparent; color: #ffffff; box-shadow: var(--sky-shadow-glass-fab-outer); font-size: 14px; font-weight: 600; text-transform: uppercase; transition: background-color var(--sky-transition-fast, 100ms) ease, box-shadow var(--sky-transition-fast, 100ms) ease, opacity var(--sky-transition-fast, 100ms) ease, transform var(--sky-transition-fast, 100ms) ease; } .sky-fab__accent-layer, .sky-fab__dark-accent-layer, .sky-fab__surface-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .sky-fab__accent-layer { z-index: 0; background: var(--sky-app-accent, #007aff); opacity: var(--sky-fab-accent-layer-opacity, 1); } .sky-fab__dark-accent-layer { z-index: 1; box-shadow: inset 0 -5px 0 -3.5px var(--sky-app-accent, #007aff), inset 0 -5px 5px var(--sky-app-accent, #007aff); opacity: var(--sky-fab-dark-accent-layer-opacity, 0); } .sky-fab__surface-layer { z-index: 2; box-shadow: inset var(--sky-fab-accent-inset-start) var(--sky-app-accent, #007aff), inset var(--sky-fab-accent-inset-end) var(--sky-app-accent, #007aff), var(--sky-shadow-glass-fab); } .sky-fab > :not(.sky-fab__accent-layer):not(.sky-fab__dark-accent-layer):not( .sky-fab__surface-layer ) { position: relative; z-index: 3; } .sky-fab--icon-only { width: var(--sky-touch-target, 44px); padding: 0; } .sky-glass.sky-fab--neutral { background: var(--sky-glass-solid, rgba(247, 247, 248, 0.96)); color: var(--sky-text, #000000); } .sky-fab--neutral .sky-fab__accent-layer, .sky-fab--neutral .sky-fab__dark-accent-layer, .sky-fab--neutral .sky-fab__surface-layer { display: none; } .sky-glass.sky-fab:active:not(:disabled) { background: transparent; } .sky-glass.sky-fab--neutral:active:not(:disabled) { background: var(--sky-glass-solid, rgba(247, 247, 248, 0.96)); } .sky-fab--disabled { cursor: default; opacity: 0.42; } .sky-fab__icon { width: 24px; height: 24px; display: inline-flex; flex: none; align-items: center; justify-content: center; } .sky-glass { position: relative; border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2)); background: var(--sky-glass-solid, rgba(247, 247, 248, 0.96)); color: var(--sky-text, #000000); box-shadow: var(--sky-shadow-glass); transition: background-color var(--sky-transition-normal, 200ms) ease, box-shadow var(--sky-transition-normal, 200ms) ease, opacity var(--sky-transition-normal, 200ms) ease, transform var(--sky-transition-normal, 200ms) ease; } .sky-glass-surface { background: var(--sky-glass-solid, rgba(247, 247, 248, 0.96)); color: var(--sky-text, #000000); box-shadow: var(--sky-shadow-glass); } .sky-glass::after { position: absolute; z-index: 10; inset: 1px; content: ''; overflow: hidden; border-radius: inherit; background: radial-gradient( circle at var(--sky-glass-highlight-x, 50%) var(--sky-glass-highlight-y, 50%), var(--sky-glass-highlight-color, rgba(255, 255, 255, 0.65)) 0, rgba(255, 255, 255, 0) 50% ); opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .sky-glass--highlight-visible::after { opacity: 1; } .sky-glass--touch-highlight { transform: scale(var(--sky-glass-touch-scale, 1.05)); transition-duration: 300ms; transition-timing-function: ease-in-out; } .sky-glass--highlight { box-shadow: var(--sky-shadow-glass), inset 0 1px 0 var(--sky-glass-highlight-color); } .sky-glass--interactive { min-width: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); cursor: pointer; } .sky-glass--interactive:active:not(:disabled) { background: var(--sky-surface-shade, #f1f1f5); } .sky-glass--disabled { cursor: default; opacity: 0.45; } .sky-list-group, .sky-list-button { position: relative; min-width: 0; margin: 0; padding: 0; list-style: none; } .sky-list-group__list { margin: 0; } .sky-list-button__action { width: 100%; min-height: 52px; gap: 4px; padding: 0 16px; background: var(--sky-surface, #ffffff); color: var(--sky-app-accent, #007aff); font-size: 17px; text-align: center; transition: background-color 300ms ease, color 300ms ease; } .sky-list-button__action:active:not(:disabled) { background: var(--sky-pressed, rgba(0, 0, 0, 0.1)); transition-duration: 0ms; } .sky-list-button--danger .sky-list-button__action { color: var(--sky-danger, #ff3b30); } .sky-list-button--disabled { opacity: 0.42; } .sky-list--dividers > .sky-list__items > .sky-list-button + .sky-list-button::before, .sky-list--dividers > .sky-list__items > .sky-list-item + .sky-list-button::before, .sky-list--dividers > .sky-list__items > .sky-list-button + .sky-list-item::before { position: absolute; z-index: 2; top: 0; right: 16px; left: 16px; height: 1px; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); pointer-events: none; transform: scaleY(var(--sky-hairline-scale, 1)); transform-origin: center top; } .sky-list-item--menu .sky-list-item__title-wrap { min-height: 0; } .sky-list-item--menu .sky-list-item__title { font-size: 14px; font-weight: 500; line-height: 20px; } .sky-list-item--menu .sky-list-item__title--strong { font-weight: 600; } .sky-list-item--menu .sky-list-item__subtitle { color: inherit; font-size: 14px; line-height: 20px; } .sky-navbar-back-link { min-width: var(--sky-touch-target, 44px); min-height: var(--sky-touch-target, 44px); gap: 1px; padding: 0 6px; border-radius: var(--sky-radius-pill, 999px); background: transparent; color: var(--sky-app-accent, #007aff); font-size: 17px; transition: opacity 300ms ease; } .sky-navbar-back-link:active:not(:disabled) { opacity: 0.5; transition-duration: 0ms; } .sky-navbar-back-link__icon { width: 18px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .sky-navbar-back-link__chevron { width: 12px; height: 12px; display: block; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); } .sky-navbar-back-link--disabled { cursor: default; opacity: 0.42; } .sky-stepper { height: 34px; min-height: 34px; display: inline-flex; align-items: stretch; overflow: visible; border-radius: 4px; background: transparent; color: var(--sky-app-accent, #007aff); } .sky-stepper--rounded { border-radius: var(--sky-radius-pill, 999px); } .sky-stepper--outline { background: transparent; } .sky-stepper--raised { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .sky-stepper__button { width: 40px; min-width: 40px; height: 34px; min-height: 34px; position: relative; padding: 0; background: var(--sky-app-accent, #007aff); color: #ffffff; } .sky-stepper__button::before { content: ''; position: absolute; inset-block: -5px; inset-inline: -2px; } .sky-stepper__decrement { border-start-start-radius: inherit; border-end-start-radius: inherit; } .sky-stepper__increment { border-start-end-radius: inherit; border-end-end-radius: inherit; } .sky-stepper__button:active:not(:disabled) { background: rgba(0, 0, 0, 0.12); } .sky-stepper--outline .sky-stepper__button { border: 2px solid var(--sky-app-accent, #007aff); background: transparent; color: var(--sky-app-accent, #007aff); } .sky-stepper--outline .sky-stepper__button:active:not(:disabled) { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)); } .sky-stepper__button:disabled { cursor: default; opacity: 0.32; } .sky-stepper__value { width: 44px; min-width: 44px; height: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-top: 2px solid var(--sky-app-accent, #007aff); border-bottom: 2px solid var(--sky-app-accent, #007aff); outline: 0; background: transparent; color: var(--sky-app-accent, #007aff); caret-color: var(--sky-app-accent, #007aff); font: inherit; font-size: 15px; font-weight: 500; text-align: center; } .sky-stepper--buttons-only:not(.sky-stepper--outline) .sky-stepper__decrement { border-inline-end: 1px solid rgba(0, 0, 0, 0.1); } .sky-stepper--buttons-only.sky-stepper--outline:not(.sky-stepper--raised) .sky-stepper__decrement { border-inline-end: 0; } .sky-stepper--outline.sky-stepper--raised .sky-stepper__button { border: 0; } .sky-stepper--outline.sky-stepper--raised .sky-stepper__value, .sky-stepper--outline.sky-stepper--raised .sky-stepper__increment { border: 0; border-inline-start: 1px solid rgba(0, 0, 0, 0.1); } .sky-stepper__input:focus-visible { box-shadow: inset 0 0 0 2px var(--sky-app-accent-soft); } .sky-stepper__input[type='number'] { appearance: textfield; } .sky-stepper__input[type='number']::-webkit-inner-spin-button, .sky-stepper__input[type='number']::-webkit-outer-spin-button { margin: 0; appearance: none; } .sky-stepper__minus, .sky-stepper__plus { position: relative; font-size: 22px; font-weight: 400; line-height: 1; } .sky-stepper--large { height: 48px; min-height: 48px; } .sky-stepper--large .sky-stepper__button, .sky-stepper--large .sky-stepper__value { height: 48px; min-height: 48px; } .sky-stepper--large .sky-stepper__button::before { inset-block: 0; } .sky-stepper--large .sky-stepper__value { font-size: 17px; } .sky-stepper--small { height: 28px; min-height: 28px; } .sky-stepper--small .sky-stepper__button, .sky-stepper--small .sky-stepper__value { height: 28px; min-height: 28px; } .sky-stepper--small .sky-stepper__button::before { inset-block: -8px; } .sky-stepper--small .sky-stepper__value { font-size: 14px; } .sky-stepper--disabled { opacity: 0.45; } .sky-table { width: 100%; margin: 0; padding: 0; border: 0; border-collapse: collapse; color: var(--sky-text, #000000); text-align: left; } .sky-table__caption { padding: 8px 16px; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 14px; text-align: left; } .sky-table-head--sticky { position: sticky; z-index: 2; top: 0; background: var(--sky-bg, #efeff4); } .sky-table-body { font-size: 14px; } .sky-table-row:not(.sky-table-row--header) { background: var(--sky-surface, #ffffff); } .sky-table--striped .sky-table-body .sky-table-row:nth-child(even) { background: var(--sky-surface-muted, #f7f7f8); } .sky-table-row--selected { background: var(--sky-app-accent-soft, rgba(0, 122, 255, 0.15)) !important; } .sky-table-cell { height: 44px; position: relative; padding: 0 16px; vertical-align: middle; } .sky-table-cell::after { height: 1px; position: absolute; right: 0; bottom: 0; left: 0; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); pointer-events: none; transform: scaleY(var(--sky-hairline-scale, 1)); transform-origin: center bottom; } .sky-table-cell--header { overflow: hidden; background: transparent; color: var(--sky-muted, rgba(0, 0, 0, 0.55)); font-size: 12px; font-weight: 600; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .sky-table--compact .sky-table-cell { height: 44px; padding-right: 10px; padding-left: 10px; } .sky-table-cell--center { text-align: center; } .sky-table-cell--end, .sky-table-cell--numeric { text-align: right; } .sky-table-cell--numeric { font-variant-numeric: tabular-nums; } .sky-table-cell--nowrap { white-space: nowrap; } .sky-table-body .sky-table-row:last-child .sky-table-cell::after { display: none; } .sky-toolbar { box-sizing: border-box; width: 100%; min-height: 48px; position: relative; z-index: 20; display: flex; justify-content: center; padding-right: calc(var(--sky-safe-area-right, 0px) + 16px); padding-bottom: calc(var(--sky-safe-area-bottom, 0px) + 16px); padding-left: calc(var(--sky-safe-area-left, 0px) + 16px); } .sky-toolbar--top { padding-bottom: 0; padding-top: 12px; } .sky-toolbar__blur, .sky-toolbar__background { width: 100%; height: calc(var(--sky-safe-area-bottom, 0px) + 80px); position: absolute; bottom: 0; left: 0; pointer-events: none; } .sky-toolbar__blur { display: none; } .sky-toolbar__background { background: linear-gradient(to top, var(--sky-bg, #efeff4), transparent); } .sky-toolbar--tabbar-icons.sky-toolbar--tabbar-labels .sky-toolbar__blur, .sky-toolbar--tabbar-icons.sky-toolbar--tabbar-labels .sky-toolbar__background { height: calc(var(--sky-safe-area-bottom, 0px) + 96px); } .sky-toolbar--top .sky-toolbar__blur, .sky-toolbar--top .sky-toolbar__background { display: none; } .sky-toolbar--outline .sky-toolbar__background { border-top: 0; } .sky-toolbar--top.sky-toolbar--outline .sky-toolbar__background { border-top: 0; border-bottom: 0; } .sky-toolbar--outline .sky-toolbar__background::before, .sky-toolbar--top.sky-toolbar--outline .sky-toolbar__background::after { height: 1px; position: absolute; right: 0; left: 0; content: ''; background: var(--sky-hairline, rgba(0, 0, 0, 0.2)); pointer-events: none; transform: scaleY(var(--sky-hairline-scale, 1)); } .sky-toolbar--outline .sky-toolbar__background::before { top: 0; transform-origin: center top; } .sky-toolbar--top.sky-toolbar--outline .sky-toolbar__background::before { display: none; } .sky-toolbar--top.sky-toolbar--outline .sky-toolbar__background::after { bottom: 0; transform-origin: center bottom; } .sky-toolbar__inner { min-width: 0; min-height: 48px; position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 16px; } .sky-toolbar--tabbar .sky-toolbar__inner { width: 100%; } .sky-toolbar--tabbar-icons.sky-toolbar--tabbar-labels .sky-toolbar__inner { min-height: 64px; } .sky-toolbar-pane { min-width: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border: 0; border-radius: var(--sky-radius-pill, 999px); } .sky-visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; padding: 0; border: 0; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .sky-button, .sky-breadcrumbs-collapsed, .sky-breadcrumbs-item, .sky-chip, .sky-checkbox__check, .sky-fab, .sky-field__label, .sky-glass, .sky-link, .sky-list-button__action, .sky-list-item__row, .sky-progress__value, .sky-range__input::-webkit-slider-runnable-track, .sky-range__input::-webkit-slider-thumb, .sky-segmented__highlight, .sky-segmented-button, .sky-toggle__thumb-side, .sky-toggle__thumb-bg, .sky-toggle__thumb-shadow, .sky-toggle__thumb-wrap, .sky-toggle__thumb { transition-duration: 0.01ms; } .sky-spinner__svg { animation-duration: 1.5s; } .sky-button:active:not(:disabled), .sky-chip:active:not(:disabled), .sky-fab:active:not(:disabled), .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb-bg, .sky-toggle:not(.sky-toggle--disabled):not(.sky-toggle--readonly):active .sky-toggle__thumb-wrap, .sky-range__input:not(:disabled):active::-webkit-slider-thumb, .sky-glass--touch-highlight { transform: none; } .sky-toggle--checked:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap { transform: translateX(22px); } [dir='rtl'] .sky-toggle--checked:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap, .sky-toggle--checked[dir='rtl']:not(.sky-toggle--disabled):not( .sky-toggle--readonly ):active .sky-toggle__thumb-wrap { transform: translateX(-22px); } } @supports ( (-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px)) ) { .sky-glass, .sky-glass-surface { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .sky-glass, .sky-glass-surface { background: var(--sky-glass, rgba(255, 255, 255, 0.75)); } } @supports ( (-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px)) ) { .sky-toolbar__blur { display: block; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 0%, #000 50%, #000 100%); mask-image: linear-gradient(transparent 0%, #000 50%, #000 100%); } .sky-toolbar--top .sky-toolbar__blur { display: none; } }