@inglorious/ui 9.5.1 → 9.6.0

package/src/styles/themes/ios-26.css

@@ -0,0 +1,741 @@
+/* San Francisco is the system font on Apple devices, and cannot be served to
+   others: Inter stands in for it there. */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+.iw-theme-ios-26 {
+  --iw-font-family-sans:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue",
+    Arial, sans-serif;
+  /* The theme on the page itself: the element with the theme class, usually
+     <body>, takes its background, text color and font. */
+  background-color: var(--iw-color-bg);
+  color: var(--iw-color-text);
+  font-family: var(--iw-font-family-sans);
+
+  /* ========================================
+     iOS 26 THEME - Liquid Glass
+     ======================================== */
+
+  /* iOS color roles the shared tokens have no name for */
+  --iw-ios-fill: rgba(118, 118, 128, 0.12);
+  --iw-ios-fill-secondary: rgba(120, 120, 128, 0.2);
+  --iw-ios-fill-quaternary: rgba(116, 116, 128, 0.08);
+  --iw-ios-gray: #8e8e93;
+  --iw-ios-segment-selected: var(--iw-color-white);
+  /* Glass: what passes under it is blurred and brightened, its edge catches
+     the light, and it floats on a soft shadow. Only controls and navigation
+     are glass, never content. */
+  --iw-ios-glass-bg: rgba(255, 255, 255, 0.6);
+  --iw-ios-glass-blur: blur(12px) saturate(180%);
+  --iw-ios-glass-border: rgba(255, 255, 255, 0.7);
+  --iw-ios-glass-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(0, 0, 0, 0.1);
+  /* The highlight along the top of a filled control */
+  --iw-ios-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+
+  /* Semantic Colors: grouped content, white on grey */
+  --iw-color-bg: #f2f2f7;
+  --iw-color-bg-secondary: #f2f2f7;
+  --iw-color-bg-tertiary: #e5e5ea;
+  --iw-color-surface: var(--iw-color-white);
+  --iw-color-surface-hover: var(--iw-ios-fill-quaternary);
+  --iw-color-surface-active: #d1d1d6;
+
+  --iw-color-text: var(--iw-color-black);
+  --iw-color-text-secondary: rgba(60, 60, 67, 0.6);
+  --iw-color-text-muted: rgba(60, 60, 67, 0.6);
+
+  --iw-color-border: #c6c6c8;
+  --iw-color-border-focus: #0088ff;
+
+  /* The system colors as iOS 26 retuned them */
+  --iw-color-primary: #0088ff;
+  --iw-color-primary-hover: color-mix(in srgb, #0088ff 92%, #000000);
+  --iw-color-primary-active: color-mix(in srgb, #0088ff 85%, #000000);
+  --iw-color-primary-text: var(--iw-color-white);
+
+  --iw-color-accent: #6155f5;
+  --iw-color-accent-hover: color-mix(in srgb, #6155f5 92%, #000000);
+  --iw-color-accent-active: color-mix(in srgb, #6155f5 85%, #000000);
+
+  --iw-color-success: #34c759;
+  --iw-color-warning: #ff8d28;
+  --iw-color-error: #ff383c;
+  --iw-color-info: #00c0e8;
+
+  --iw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --iw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --iw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
+  --iw-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.2);
+
+  /* Larger corners, nested concentrically */
+  --iw-radius-sm: 8px;
+  --iw-radius-md: 12px;
+  --iw-radius-lg: 16px;
+  --iw-radius-xl: 24px;
+  --iw-radius-2xl: 34px;
+
+  /* The Dynamic Type scale at its default size: footnote, subheadline,
+     body, title 3, title 2, title 1 and large title */
+  --iw-font-size-xs: 0.8125rem;
+  --iw-font-size-sm: 0.9375rem;
+  --iw-font-size-base: 1.0625rem;
+  --iw-font-size-lg: 1.25rem;
+  --iw-font-size-xl: 1.375rem;
+  --iw-font-size-2xl: 1.75rem;
+  --iw-font-size-3xl: 2.125rem;
+
+  --iw-label-font-weight: var(--iw-font-weight-medium);
+
+  /* ========================================
+     COMPONENT TOKENS
+     ======================================== */
+
+  /* Button: a filled capsule */
+  --iw-button-bg: var(--iw-color-primary);
+  --iw-button-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-bg-active: var(--iw-color-primary);
+  --iw-button-text: var(--iw-color-primary-text);
+  --iw-button-border: transparent;
+  --iw-button-radius: var(--iw-radius-full);
+  --iw-button-shadow: var(--iw-ios-sheen);
+  --iw-button-shadow-hover: var(--iw-ios-sheen);
+  --iw-button-shadow-active: var(--iw-ios-sheen);
+
+  /* A button's default color is a glass button, labelled in the text color;
+     its outlined and ghost forms take the tint */
+  --iw-button-default-color: var(--iw-color-primary);
+  --iw-button-default-bg: var(--iw-ios-glass-bg);
+  --iw-button-default-bg-hover: var(--iw-ios-glass-bg);
+  --iw-button-default-bg-active: var(--iw-ios-glass-bg);
+  --iw-button-default-border: var(--iw-ios-glass-border);
+  --iw-button-default-text: var(--iw-color-text);
+
+  /* Input: a filled, borderless field */
+  --iw-input-bg: var(--iw-ios-fill);
+  --iw-input-bg-hover: var(--iw-ios-fill);
+  --iw-input-bg-focus: var(--iw-ios-fill);
+  --iw-input-text: var(--iw-color-text);
+  --iw-input-text-placeholder: rgba(60, 60, 67, 0.3);
+  --iw-input-border: transparent;
+  --iw-input-border-hover: transparent;
+  --iw-input-border-focus: transparent;
+  --iw-input-radius: var(--iw-radius-md);
+  --iw-input-shadow-focus: 0 0 0 3px
+    color-mix(in srgb, var(--iw-color-primary) 35%, transparent);
+
+  /* App bar: the content shows through, blurred, under the title */
+  --iw-app-bar-bg: color-mix(in srgb, var(--iw-color-bg) 72%, transparent);
+
+  /* Drawer: a sidebar */
+  --iw-drawer-bg: var(--iw-color-bg);
+
+  /* Card: an inset grouped section, with the larger corners */
+  --iw-card-bg: var(--iw-color-surface);
+  --iw-card-border: transparent;
+  --iw-card-radius: var(--iw-radius-xl);
+  --iw-card-shadow: none;
+  --iw-card-shadow-hover: var(--iw-shadow-md);
+
+  /* Badge */
+  --iw-badge-radius: var(--iw-radius-full);
+
+  /* Chip: a gray capsule */
+  --iw-chip-bg: var(--iw-ios-fill);
+
+  /* List */
+  --iw-list-item: transparent;
+  --iw-list-item-active: var(--iw-color-surface-active);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 12%,
+    transparent
+  );
+
+  /* Progress: a thin bar */
+  --iw-progress-height: 4px;
+  --iw-progress-radius: var(--iw-radius-full);
+  --iw-progress-track-color: var(--iw-ios-fill-secondary);
+
+  /* Alert */
+  --iw-alert-radius: var(--iw-radius-lg);
+  --iw-alert-shadow: none;
+  color-scheme: light;
+}
+
+/* Dark variant */
+.iw-theme-ios-26.iw-theme-dark {
+  color-scheme: dark;
+
+  --iw-ios-fill: rgba(118, 118, 128, 0.24);
+  --iw-ios-fill-secondary: rgba(120, 120, 128, 0.36);
+  --iw-ios-fill-quaternary: rgba(116, 116, 128, 0.18);
+  --iw-ios-segment-selected: #636366;
+  --iw-ios-glass-bg: rgba(44, 44, 46, 0.6);
+  --iw-ios-glass-border: rgba(255, 255, 255, 0.14);
+  --iw-ios-glass-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --iw-ios-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+
+  --iw-color-bg: var(--iw-color-black);
+  --iw-color-bg-secondary: #1c1c1e;
+  --iw-color-bg-tertiary: #2c2c2e;
+  --iw-color-surface: #1c1c1e;
+  --iw-color-surface-active: #3a3a3c;
+  --iw-color-text: var(--iw-color-white);
+  --iw-color-text-secondary: rgba(235, 235, 245, 0.6);
+  --iw-color-text-muted: rgba(235, 235, 245, 0.6);
+  --iw-color-border: #38383a;
+
+  --iw-color-primary: #0091ff;
+  --iw-color-primary-hover: color-mix(in srgb, #0091ff 88%, #ffffff);
+  --iw-color-primary-active: color-mix(in srgb, #0091ff 80%, #ffffff);
+  --iw-color-border-focus: #0091ff;
+
+  --iw-color-accent: #6d7cff;
+  --iw-color-accent-hover: color-mix(in srgb, #6d7cff 88%, #ffffff);
+  --iw-color-accent-active: color-mix(in srgb, #6d7cff 80%, #ffffff);
+
+  --iw-color-success: #30d158;
+  --iw-color-warning: #ff9230;
+  --iw-color-error: #ff4245;
+  --iw-color-info: #3cd3fe;
+
+  --iw-input-text-placeholder: rgba(235, 235, 245, 0.3);
+
+  --iw-drawer-bg: #1c1c1e;
+}
+
+.iw-theme-ios-26 {
+  /* Buttons: capsules, filled, glass, tinted and plain. Pressing one
+     brightens it */
+  .iw-button {
+    padding: 7px 16px;
+    font-size: var(--iw-font-size-base);
+    line-height: 1.375rem;
+
+    &.iw-button-xs {
+      padding: 2px 10px;
+      font-size: var(--iw-font-size-xs);
+      line-height: 1.125rem;
+    }
+
+    &.iw-button-sm {
+      padding: 4px 12px;
+      font-size: var(--iw-font-size-sm);
+      line-height: 1.25rem;
+    }
+
+    &.iw-button-lg {
+      padding: 14px 24px;
+      font-weight: var(--iw-font-weight-semibold);
+    }
+
+    &.iw-button-shape-square {
+      border-radius: var(--iw-radius-md);
+    }
+
+    &.iw-button-default {
+      backdrop-filter: var(--iw-ios-glass-blur);
+      --iw-button-shadow: var(--iw-ios-glass-shadow);
+      --iw-button-shadow-hover: var(--iw-ios-glass-shadow);
+    }
+
+    &.iw-button-secondary {
+      --iw-button-color: var(--iw-ios-gray);
+      --iw-button-bg: var(--iw-ios-gray);
+      --iw-button-bg-hover: color-mix(in srgb, var(--iw-ios-gray) 90%, #000);
+      --iw-button-border: transparent;
+    }
+
+    &.iw-button-secondary,
+    &.iw-button-success,
+    &.iw-button-warning,
+    &.iw-button-error,
+    &.iw-button-info {
+      --iw-button-text: var(--iw-color-white);
+    }
+
+    &.iw-button-primary,
+    &.iw-button-secondary,
+    &.iw-button-success,
+    &.iw-button-warning,
+    &.iw-button-error,
+    &.iw-button-info {
+      --iw-button-border: transparent;
+      --iw-button-bg-hover: color-mix(in srgb, var(--iw-button-bg) 90%, #000);
+      --iw-button-bg-active: var(--iw-button-bg);
+    }
+
+    &:active:not(:disabled),
+    &.iw-button-pressed {
+      filter: brightness(1.12);
+    }
+
+    &:focus-visible {
+      outline: 3px solid
+        color-mix(in srgb, var(--iw-color-primary) 50%, transparent);
+      outline-offset: 2px;
+    }
+
+    /* Outlined buttons are tinted: iOS draws no outlines */
+    &.iw-button-outline {
+      border-color: transparent;
+      background-color: color-mix(
+        in srgb,
+        var(--iw-button-color) 15%,
+        transparent
+      );
+      color: var(--iw-button-color);
+      backdrop-filter: none;
+
+      &:hover:not(:disabled),
+      &:active:not(:disabled),
+      &.iw-button-pressed {
+        color: var(--iw-button-color);
+        background-color: color-mix(
+          in srgb,
+          var(--iw-button-color) 22%,
+          transparent
+        );
+      }
+    }
+
+    /* Ghost buttons are plain */
+    &.iw-button-ghost {
+      backdrop-filter: none;
+
+      &:hover:not(:disabled),
+      &:active:not(:disabled),
+      &.iw-button-pressed {
+        color: var(--iw-button-color);
+        background-color: var(--iw-ios-fill-quaternary);
+      }
+    }
+
+    &:disabled,
+    &.iw-button-disabled {
+      opacity: 1;
+      color: color-mix(in srgb, var(--iw-color-text) 30%, transparent);
+      background-color: var(--iw-ios-fill);
+      border-color: transparent;
+      box-shadow: none;
+
+      &.iw-button-ghost {
+        background-color: transparent;
+      }
+    }
+  }
+
+  /* Form fields: labels and notes in the footnote style around a filled
+     field */
+  .iw-input,
+  .iw-select,
+  .iw-textarea-field {
+    .iw-input-label,
+    .iw-select-label,
+    .iw-textarea-label {
+      font-size: var(--iw-font-size-sm);
+      color: var(--iw-color-text-secondary);
+    }
+
+    .iw-input-frame,
+    .iw-select-frame {
+      padding-inline: 14px;
+    }
+
+    .iw-input-hint,
+    .iw-input-error-message,
+    .iw-select-hint,
+    .iw-select-error-message {
+      font-size: var(--iw-font-size-xs);
+    }
+
+    .iw-input-frame:has(.iw-input-control-error):focus-within,
+    .iw-select-frame:has(.iw-select-control-error):focus-within {
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--iw-color-error) 35%, transparent);
+    }
+  }
+
+  /* Switch: a wide, low track with a capsule for a thumb, green when on */
+  .iw-switch:not(
+    .iw-switch-secondary,
+    .iw-switch-success,
+    .iw-switch-warning,
+    .iw-switch-error,
+    .iw-switch-info
+  ) {
+    --iw-switch-active-bg: var(--iw-color-success);
+  }
+
+  .iw-switch {
+    .iw-switch-track {
+      width: 4rem;
+      height: 1.75rem;
+      padding: 2px;
+      background: var(--iw-ios-fill-secondary);
+      transition: background-color var(--iw-transition-normal);
+    }
+
+    .iw-switch-thumb {
+      width: 2.375rem;
+      height: 1.5rem;
+      border-radius: var(--iw-radius-full);
+      background: var(--iw-color-white);
+      box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.15),
+        0 1px 1px rgba(0, 0, 0, 0.06);
+      transition: transform var(--iw-transition-normal);
+    }
+
+    .iw-switch-input:focus-visible + .iw-switch-track {
+      outline: 3px solid
+        color-mix(in srgb, var(--iw-color-primary) 50%, transparent);
+      outline-offset: 2px;
+    }
+
+    .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+      transform: translateX(calc(1.375rem * var(--iw-dir-sign, 1)));
+    }
+
+    &.iw-switch-sm {
+      .iw-switch-track {
+        width: 3.25rem;
+        height: 1.5rem;
+      }
+
+      .iw-switch-thumb {
+        width: 2rem;
+        height: 1.25rem;
+      }
+
+      .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+        transform: translateX(calc(1rem * var(--iw-dir-sign, 1)));
+      }
+    }
+
+    &.iw-switch-lg {
+      .iw-switch-track {
+        width: 4.75rem;
+        height: 2.125rem;
+      }
+
+      .iw-switch-thumb {
+        width: 2.875rem;
+        height: 1.875rem;
+      }
+
+      .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+        transform: translateX(calc(1.625rem * var(--iw-dir-sign, 1)));
+      }
+    }
+  }
+
+  /* Tabs: a segmented control in a capsule, its segments equally wide */
+  .iw-tabs-list {
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: 0;
+    padding: 2px;
+    border: 0 none;
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-ios-fill);
+
+    &.iw-tabs-full-width {
+      display: grid;
+    }
+
+    &.iw-tabs-centered {
+      display: grid;
+      width: fit-content;
+      margin-inline: auto;
+    }
+  }
+
+  .iw-tab {
+    justify-content: center;
+    padding: 5px 14px;
+    font-size: var(--iw-font-size-xs);
+    line-height: 1.125rem;
+    color: var(--iw-color-text);
+    border: 0 none;
+    border-radius: var(--iw-radius-full);
+    transition: background-color var(--iw-transition-normal);
+  }
+
+  .iw-tab.iw-tab-selected {
+    color: var(--iw-color-text);
+    font-weight: var(--iw-font-weight-semibold);
+    background: var(--iw-ios-segment-selected);
+    box-shadow:
+      0 3px 8px rgba(0, 0, 0, 0.12),
+      0 3px 1px rgba(0, 0, 0, 0.04);
+  }
+
+  /* Chips: capsules, filled with the tint when selected */
+  .iw-chip {
+    padding: 6px 12px;
+    font-size: var(--iw-font-size-sm);
+
+    &.iw-chip-selectable {
+      border-color: transparent;
+    }
+
+    &.iw-chip-selected {
+      background: var(--iw-color-primary);
+      color: var(--iw-color-white);
+    }
+  }
+
+  .iw-badge {
+    font-weight: var(--iw-font-weight-semibold);
+  }
+
+  /* Cards: inset grouped sections, the footer ruled off below */
+  .iw-card-header {
+    border: 0 none;
+  }
+
+  .iw-card-footer {
+    background-color: transparent;
+  }
+
+  .iw-card-title {
+    font-size: var(--iw-font-size-base);
+    font-weight: var(--iw-font-weight-semibold);
+    line-height: 1.375rem;
+  }
+
+  .iw-card-subtitle {
+    font-size: var(--iw-font-size-sm);
+  }
+
+  /* Alerts: tinted, borderless boxes */
+  .iw-alert {
+    padding: 14px 16px;
+
+    &:not(.iw-alert-outlined) {
+      border-color: transparent;
+    }
+
+    .iw-alert-title {
+      font-weight: var(--iw-font-weight-semibold);
+    }
+
+    .iw-alert-description {
+      font-size: var(--iw-font-size-sm);
+      color: var(--iw-color-text);
+    }
+  }
+
+  .iw-alert-filled {
+    color: var(--iw-color-text);
+    background: color-mix(
+      in srgb,
+      var(--iw-alert-color) 15%,
+      var(--iw-color-surface)
+    );
+
+    .iw-alert-title {
+      color: var(--iw-alert-color);
+    }
+  }
+
+  /* Tables: a plain list */
+  .iw-table {
+    border: 0 none;
+  }
+
+  .iw-table-header-cell,
+  .iw-table-cell {
+    padding: 11px 16px;
+  }
+
+  .iw-table-header-cell {
+    padding-block: 6px;
+    font-size: var(--iw-font-size-xs);
+    font-weight: var(--iw-font-weight-semibold);
+    color: var(--iw-color-text-secondary);
+  }
+
+  /* Dialogs: alerts on glass, their text aligned to the start and their
+     actions a row of capsules */
+  .iw-dialog {
+    border: 1px solid var(--iw-ios-glass-border);
+    border-radius: var(--iw-radius-2xl);
+    background: var(--iw-ios-glass-bg);
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: var(--iw-ios-glass-shadow), var(--iw-shadow-xl);
+
+    &::backdrop {
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: none;
+    }
+  }
+
+  &.iw-theme-dark .iw-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.48);
+  }
+
+  .iw-dialog-surface {
+    padding: 22px;
+  }
+
+  .iw-dialog-title {
+    font-size: var(--iw-font-size-base);
+    font-weight: var(--iw-font-weight-semibold);
+  }
+
+  .iw-dialog-description {
+    margin-top: 4px;
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text);
+  }
+
+  .iw-dialog-actions {
+    flex-wrap: nowrap;
+    gap: 10px;
+    margin-top: 20px;
+  }
+
+  .iw-dialog .iw-dialog-actions .iw-button {
+    flex: 1;
+    padding-block: 13px;
+
+    /* Actions that are not the preferred one sit on a gray capsule */
+    &.iw-button-outline,
+    &.iw-button-ghost,
+    &.iw-button-default {
+      background-color: var(--iw-ios-fill-secondary);
+      border-color: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    &.iw-button-primary.iw-button-outline,
+    &.iw-button-primary.iw-button-ghost,
+    &.iw-button-default {
+      color: var(--iw-color-text);
+    }
+
+    &.iw-button-outline,
+    &.iw-button-ghost,
+    &.iw-button-default {
+      &:hover:not(:disabled),
+      &:active:not(:disabled),
+      &.iw-button-pressed {
+        background-color: color-mix(
+          in srgb,
+          var(--iw-color-text) 10%,
+          var(--iw-ios-fill-secondary)
+        );
+      }
+    }
+  }
+
+  /* Menus, tooltips and snackbars float on glass */
+  .iw-menu {
+    min-width: 15rem;
+    padding: 6px;
+    border: 1px solid var(--iw-ios-glass-border);
+    border-radius: var(--iw-radius-xl);
+    background: var(--iw-ios-glass-bg);
+    backdrop-filter: var(--iw-ios-glass-blur);
+    box-shadow: var(--iw-ios-glass-shadow), var(--iw-shadow-lg);
+  }
+
+  .iw-menu-item {
+    padding: 10px 14px;
+    border-radius: var(--iw-radius-lg);
+    font-size: var(--iw-font-size-base);
+  }
+
+  .iw-menu-item:hover:enabled,
+  .iw-menu-item-selected {
+    background: var(--iw-ios-fill);
+  }
+
+  .iw-menu-divider {
+    margin: 6px 14px;
+  }
+
+  .iw-tooltip .iw-tooltip-bubble {
+    border: 1px solid var(--iw-ios-glass-border);
+    border-radius: var(--iw-radius-md);
+    background: var(--iw-ios-glass-bg);
+    backdrop-filter: var(--iw-ios-glass-blur);
+    box-shadow: var(--iw-ios-glass-shadow);
+  }
+
+  .iw-snackbar-content {
+    border: 1px solid var(--iw-ios-glass-border);
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-ios-glass-bg);
+    backdrop-filter: var(--iw-ios-glass-blur);
+    box-shadow: var(--iw-ios-glass-shadow);
+    color: var(--iw-color-text);
+  }
+
+  /* App bars: no bar at all, just a blur where the content passes under the
+     title. A prominent one has a large title */
+  .iw-app-bar {
+    border-bottom: 0 none;
+    backdrop-filter: blur(8px);
+  }
+
+  .iw-app-bar-elevated {
+    box-shadow: none;
+  }
+
+  .iw-app-bar-title {
+    font-size: var(--iw-font-size-base);
+    font-weight: var(--iw-font-weight-semibold);
+  }
+
+  .iw-app-bar-subtitle {
+    font-size: var(--iw-font-size-xs);
+  }
+
+  .iw-app-bar-prominent .iw-app-bar-title {
+    font-size: var(--iw-font-size-3xl);
+    font-weight: var(--iw-font-weight-bold);
+    line-height: 2.5625rem;
+  }
+
+  /* Bottom navigation: a tab bar floating on glass, the selected tab on a
+     capsule of its own */
+  .iw-bottom-navigation {
+    gap: 0;
+    margin: 0 var(--iw-space-4) var(--iw-space-4);
+    padding: 4px;
+    border: 1px solid var(--iw-ios-glass-border);
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-ios-glass-bg);
+    backdrop-filter: var(--iw-ios-glass-blur);
+    box-shadow: var(--iw-ios-glass-shadow);
+  }
+
+  .iw-bottom-navigation-action {
+    gap: 1px;
+    padding: 6px 2px 5px;
+    border-radius: var(--iw-radius-full);
+    color: var(--iw-color-text);
+  }
+
+  .iw-bottom-navigation-action-selected {
+    color: var(--iw-color-primary);
+    background: var(--iw-ios-fill);
+  }
+
+  .iw-bottom-navigation-icon {
+    font-size: 1.375rem;
+    line-height: 1;
+  }
+
+  .iw-bottom-navigation-label {
+    font-size: 0.625rem;
+    font-weight: var(--iw-font-weight-medium);
+  }
+}