@rolemodel/optics 1.3.0 → 1.5.0

package/dist/css/optics.css

@@ -2019,34 +2019,38 @@ small {
 }
 
 .accordion {
-  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit));
-}
-.accordion summary {
-  display: grid;
-  min-height: var(--_op-accordion-summary-min-height);
-  align-items: center;
-  cursor: pointer;
-  gap: var(--op-space-2x-small);
-  grid-template-columns: auto 1fr auto;
-}
-.accordion summary::marker, .accordion summary::-webkit-details-marker {
-  display: none;
-  content: "";
-}
-.accordion summary .accordion__label {
-  color: var(--op-color-neutral-on-plus-max);
-  font-size: var(--op-font-x-small);
-  font-weight: var(--op-font-weight-semi-bold);
-}
-.accordion summary .accordion__marker {
-  --op-mso-optical-sizing: 48;
-  font-size: var(--op-font-x-large);
-  justify-self: flex-end;
-  transition: var(--op-transition-accordion);
-  user-select: none;
-}
-[open].accordion summary .accordion__marker {
-  rotate: 0.25turn;
+  /* Public API (customizable component options) */
+  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
+  summary {
+    display: grid;
+    min-height: var(--_op-accordion-summary-min-height);
+    align-items: center;
+    cursor: pointer;
+    gap: var(--op-space-2x-small);
+    grid-template-columns: auto 1fr auto;
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+      content: "";
+    }
+    .accordion__label {
+      color: var(--op-color-neutral-on-plus-max);
+      font-size: var(--op-font-x-small);
+      font-weight: var(--op-font-weight-semi-bold);
+    }
+    .accordion__marker {
+      --op-mso-optical-sizing: 48;
+      font-size: var(--op-font-x-large);
+      justify-self: flex-end;
+      transition: var(--op-transition-accordion);
+      user-select: none;
+    }
+  }
+  &[open] {
+    summary .accordion__marker {
+      rotate: 0.25turn;
+    }
+  }
 }
 
 .alert {
@@ -2190,6 +2194,7 @@ small {
 }
 
 .avatar {
+  /* Public API (customizable component options) */
   --_op-avatar-border-radius: var(--op-radius-circle);
   --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
   --_op-avatar-outer-border-color: var(--op-color-neutral-base);
@@ -2197,9 +2202,10 @@ small {
   --_op-avatar-outer-border-width: var(--op-border-width-large);
   --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
   --_op-avatar-hover-opacity: var(--op-opacity-overlay);
-  --_op-avatar-size-small: calc(8 * var(--op-size-unit));
-  --_op-avatar-size-medium: calc(10 * var(--op-size-unit));
-  --_op-avatar-size-large: calc(14 * var(--op-size-unit));
+  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
+  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
+  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */
+  /* Private API (component option defaults) */
   --__op-avatar-size: var(--_op-avatar-size-large);
   position: relative;
   z-index: 1;
@@ -2210,61 +2216,66 @@ small {
   height: var(--__op-avatar-size);
   min-height: var(--__op-avatar-size);
   border-radius: var(--_op-avatar-border-radius);
-}
-.avatar::before {
-  position: absolute;
-  z-index: 2;
-  content: "";
-  inset: 0;
-}
-.avatar::after {
-  position: absolute;
-  z-index: 3;
-  border-radius: var(--_op-avatar-border-radius);
-  box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
-  content: "";
-  inset: 0;
-}
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.avatar--disabled.avatar {
-  opacity: var(--_op-avatar-disabled-opacity);
-  pointer-events: none;
-}
-.avatar:hover:not(div, .avatar--disabled) {
-  --_op-avatar-inner-border-color: var(--op-color-primary-base);
-  --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
-  cursor: pointer;
-}
-.avatar:hover:not(div, .avatar--disabled)::before {
-  background-color: var(--op-color-primary-base);
-  opacity: var(--_op-avatar-hover-opacity);
-}
-.avatar:focus, .avatar:focus-visible, .avatar:focus-within {
-  outline: none;
-}
-.avatar:focus-visible:not(.avatar--disabled) {
-  --_op-avatar-outer-border-color: var(--op-color-primary-base);
-  cursor: pointer;
-}
-.avatar--small.avatar {
-  --__op-avatar-size: var(--_op-avatar-size-small);
-}
-.avatar--medium.avatar {
-  --__op-avatar-size: var(--_op-avatar-size-medium);
-}
-.avatar--large.avatar {
-  --__op-avatar-size: var(--_op-avatar-size-large);
+  &::before {
+    position: absolute;
+    z-index: 2;
+    content: "";
+    inset: 0;
+  }
+  &::after {
+    position: absolute;
+    z-index: 3;
+    border-radius: var(--_op-avatar-border-radius);
+    box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
+    content: "";
+    inset: 0;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  /* Disabled State */
+  &.avatar--disabled {
+    opacity: var(--_op-avatar-disabled-opacity);
+    pointer-events: none;
+  }
+  /* Focus State */
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: none;
+  }
+  /* Hover State */
+  &:hover:not(div, .avatar--disabled) {
+    --_op-avatar-inner-border-color: var(--op-color-primary-base);
+    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
+    cursor: pointer;
+    &::before {
+      background-color: var(--op-color-primary-base);
+      opacity: var(--_op-avatar-hover-opacity);
+    }
+  }
+  &:focus-visible:not(.avatar--disabled) {
+    --_op-avatar-outer-border-color: var(--op-color-primary-base);
+    cursor: pointer;
+  }
+  /* Size Modifiers */
+  &.avatar--small {
+    --__op-avatar-size: var(--_op-avatar-size-small);
+  }
+  &.avatar--medium {
+    --__op-avatar-size: var(--_op-avatar-size-medium);
+  }
+  &.avatar--large {
+    --__op-avatar-size: var(--_op-avatar-size-large);
+  }
 }
 
-.badge-notice, .badge-info, .badge-danger, .badge-warning, .badge-primary, .badge {
+.badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--op-space-2x-small) var(--op-space-x-small);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-neutral-base);
   color: var(--op-color-neutral-on-base);
@@ -2274,82 +2285,85 @@ small {
   gap: var(--op-space-x-small);
   letter-spacing: var(--op-letter-spacing-label);
   line-height: var(--op-line-height-dense);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-x-small);
   user-select: none;
   white-space: nowrap;
-}
-.badge-notice .material-symbols-outlined, .badge-info .material-symbols-outlined, .badge-danger .material-symbols-outlined, .badge-warning .material-symbols-outlined, .badge-primary .material-symbols-outlined, .badge .material-symbols-outlined {
-  font-size: var(--op-font-small);
-}
-.badge--pill.badge-notice, .badge--pill.badge-info, .badge--pill.badge-danger, .badge--pill.badge-warning, .badge--pill.badge-primary, .badge--pill.badge {
-  border-radius: var(--op-radius-pill);
-}
-.badge--notification-right.badge-notice, .badge--notification-right.badge-info, .badge--notification-right.badge-danger, .badge--notification-right.badge-warning, .badge--notification-right.badge-primary, .badge--notification-right.badge {
-  position: absolute;
-  top: 0;
-  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
-  pointer-events: none;
-  right: 0;
-  transform: translateY(-50%) translateX(50%);
-}
-.badge--notification-left.badge-notice, .badge--notification-left.badge-info, .badge--notification-left.badge-danger, .badge--notification-left.badge-warning, .badge--notification-left.badge-primary, .badge--notification-left.badge {
-  position: absolute;
-  top: 0;
-  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
-  pointer-events: none;
-  left: 0;
-  transform: translateY(-50%) translateX(-50%);
-}
-
-.badge-primary {
-  background-color: var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-
-.badge-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
-}
-
-.badge-danger {
-  background-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
-}
-
-.badge-info {
-  background-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-base);
-}
-
-.badge-notice {
-  background-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-base);
+  /* Elements */
+  .material-symbols-outlined {
+    font-size: var(--op-font-small);
+  }
+  /* Modifiers */
+  &.badge--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+  }
+  &.badge--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+  }
+  &.badge--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+  }
+  &.badge--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+  }
+  &.badge--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+  }
+  &.badge--pill {
+    border-radius: var(--op-radius-pill);
+  }
+  &.badge--notification-right {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(50%);
+  }
+  &.badge--notification-left {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(-50%);
+  }
 }
 
 .breadcrumbs {
+  /* Public API (customizable component options) */
   --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
   --_op-breadcrumbs-font-size-large: var(--op-font-small);
+  /* Private API (component option defaults) */
   --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--op-space-x-small);
-}
-.breadcrumbs .breadcrumbs__link {
-  font-size: var(--__op-breadcrumbs-font-size);
-  text-decoration: none;
-}
-.breadcrumbs .breadcrumbs__link:hover {
-  text-decoration: underline;
-}
-.breadcrumbs .breadcrumbs__text {
-  font-size: var(--__op-breadcrumbs-font-size);
-  font-weight: var(--op-font-weight-bold);
-}
-.breadcrumbs--small.breadcrumbs {
-  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
-}
-.breadcrumbs--large.breadcrumbs {
-  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
+  /* Elements */
+  .breadcrumbs__link {
+    font-size: var(--__op-breadcrumbs-font-size);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .breadcrumbs__text {
+    font-size: var(--__op-breadcrumbs-font-size);
+    font-weight: var(--op-font-weight-bold);
+  }
+  /* Modifiers */
+  &.breadcrumbs--small {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
+  }
+  &.breadcrumbs--large {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
+  }
 }
 
 .btn-warning, .btn-destructive,
@@ -2803,7 +2817,8 @@ small {
   justify-content: space-between;
 }
 
-.divider-vertical, .divider {
+.divider {
+  /* Public API (customizable component options) */
   --_op-divider-vertical-min-height: var(--op-space-large);
   --_op-divider-height-small: var(--op-border-width);
   --_op-divider-height-medium: var(--op-border-width-large);
@@ -2811,40 +2826,42 @@ small {
   --_op-divider-padding-small: var(--op-space-2x-small);
   --_op-divider-padding-medium: var(--op-space-x-small);
   --_op-divider-padding-large: var(--op-space-medium);
+  /* Private API (component option defaults) */
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
-  background-color: var(--op-color-border);
-}
-.divider--small.divider-vertical, .divider--small.divider {
-  --__op-divider-height: var(--_op-divider-height-small);
-}
-.divider--medium.divider-vertical, .divider--medium.divider {
-  --__op-divider-height: var(--_op-divider-height-medium);
-}
-.divider--large.divider-vertical, .divider--large.divider {
-  --__op-divider-height: var(--_op-divider-height-large);
-}
-.divider--spacing-small.divider-vertical, .divider--spacing-small.divider {
-  --__op-divider-padding: var(--_op-divider-padding-small);
-}
-.divider--spacing-medium.divider-vertical, .divider--spacing-medium.divider {
-  --__op-divider-padding: var(--_op-divider-padding-medium);
-}
-.divider--spacing-large.divider-vertical, .divider--spacing-large.divider {
-  --__op-divider-padding: var(--_op-divider-padding-large);
-}
-
-.divider {
   width: 100%;
   height: var(--__op-divider-height);
-  margin: var(--__op-divider-padding) 0;
-}
-
-.divider-vertical {
-  width: var(--__op-divider-height);
-  height: 100%;
-  min-height: var(--_op-divider-vertical-min-height);
-  margin: 0 var(--__op-divider-padding);
+  background-color: var(--op-color-border);
+  margin-block: var(--__op-divider-padding);
+  margin-inline: 0;
+  /* Size Modifiers */
+  &.divider--small {
+    --__op-divider-height: var(--_op-divider-height-small);
+  }
+  &.divider--medium {
+    --__op-divider-height: var(--_op-divider-height-medium);
+  }
+  &.divider--large {
+    --__op-divider-height: var(--_op-divider-height-large);
+  }
+  /* Spacing Modifiers */
+  &.divider--spacing-small {
+    --__op-divider-padding: var(--_op-divider-padding-small);
+  }
+  &.divider--spacing-medium {
+    --__op-divider-padding: var(--_op-divider-padding-medium);
+  }
+  &.divider--spacing-large {
+    --__op-divider-padding: var(--_op-divider-padding-large);
+  }
+  /* Direction Modifier */
+  &.divider--vertical {
+    width: var(--__op-divider-height);
+    height: 100%;
+    min-height: var(--_op-divider-vertical-min-height);
+    margin-block: 0;
+    margin-inline: var(--__op-divider-padding);
+  }
 }
 
 .form-control {
@@ -3391,19 +3408,21 @@ dialog.modal.modal--closing::backdrop {
   display: flex;
   align-items: center;
   gap: 0;
-}
-.pagination .form-group {
-  align-items: center;
-}
-.pagination .form-group .form-label {
-  grid-column: 1;
-}
-.pagination .form-group .form-control {
-  grid-column: 2;
-}
-.pagination .pagination__divider {
-  height: 100%;
-  padding: 0 var(--op-space-x-small);
+  /* Showing Dropdown */
+  .form-group {
+    align-items: center;
+    .form-label {
+      grid-column: 1;
+    }
+    .form-control {
+      grid-column: 2;
+    }
+  }
+  /* ... Gap */
+  .pagination__divider {
+    height: 100%;
+    padding-inline: var(--op-space-x-small);
+  }
 }
 
 .sidebar-primary, .sidebar {
@@ -3564,7 +3583,8 @@ dialog.modal.modal--closing::backdrop {
 }
 
 .side-panel {
-  --_op-side-panel-width: calc(54 * var(--op-size-unit));
+  /* Public API (customizable component options) */
+  --_op-side-panel-width: calc(54 * var(--op-size-unit)); /* 216px */
   --_op-side-panel-header-padding: var(--op-space-medium);
   --_op-side-panel-body-padding: var(--op-space-medium);
   --_op-side-panel-footer-padding: var(--op-space-medium);
@@ -3577,70 +3597,80 @@ dialog.modal.modal--closing::backdrop {
   flex-direction: column;
   background-color: var(--op-color-background);
   color: var(--op-color-on-background);
-}
-.side-panel--border-left.side-panel {
-  box-shadow: var(--op-border-left) var(--op-color-border);
-}
-.side-panel--border-right.side-panel {
-  box-shadow: var(--op-border-right) var(--op-color-border);
-}
-.side-panel--border-left.side-panel--border-right.side-panel {
-  box-shadow: var(--op-border-x);
-}
-.side-panel .side-panel__header.side-panel__header--padded {
-  padding: var(--_op-side-panel-header-padding);
-}
-.side-panel .side-panel__header.side-panel__header--padded-x {
-  padding-inline: var(--_op-side-panel-header-padding);
-}
-.side-panel .side-panel__header.side-panel__header--padded-y {
-  padding-block: var(--_op-side-panel-header-padding);
-}
-.side-panel .side-panel__body {
-  flex: 1;
-  overflow-y: auto;
-}
-.side-panel .side-panel__body.side-panel__body--padded {
-  padding: var(--_op-side-panel-body-padding);
-}
-.side-panel .side-panel__body.side-panel__body--padded-x {
-  padding-inline: var(--_op-side-panel-body-padding);
-}
-.side-panel .side-panel__body.side-panel__body--padded-y {
-  padding-block: var(--_op-side-panel-body-padding);
-}
-.side-panel .side-panel__footer.side-panel__footer--padded {
-  padding: var(--_op-side-panel-footer-padding);
-}
-.side-panel .side-panel__footer.side-panel__footer--padded-x {
-  padding-inline: var(--_op-side-panel-footer-padding);
-}
-.side-panel .side-panel__footer.side-panel__footer--padded-y {
-  padding-block: var(--_op-side-panel-footer-padding);
-}
-.side-panel .side-panel__section.side-panel__section--padded {
-  padding: var(--_op-side-panel-section-padding);
-}
-.side-panel .side-panel__section.side-panel__section--padded-x {
-  padding-inline: var(--_op-side-panel-section-padding);
-}
-.side-panel .side-panel__section.side-panel__section--padded-y {
-  padding-block: var(--_op-side-panel-section-padding);
+  /* Modifiers */
+  &.side-panel--border-left {
+    box-shadow: var(--op-border-left) var(--op-color-border);
+  }
+  &.side-panel--border-right {
+    box-shadow: var(--op-border-right) var(--op-color-border);
+  }
+  &.side-panel--border-left.side-panel--border-right {
+    box-shadow: var(--op-border-x);
+  }
+  /* Elements */
+  .side-panel__header {
+    &.side-panel__header--padded {
+      padding: var(--_op-side-panel-header-padding);
+    }
+    &.side-panel__header--padded-x {
+      padding-inline: var(--_op-side-panel-header-padding);
+    }
+    &.side-panel__header--padded-y {
+      padding-block: var(--_op-side-panel-header-padding);
+    }
+  }
+  .side-panel__body {
+    flex: 1;
+    overflow-y: auto;
+    &.side-panel__body--padded {
+      padding: var(--_op-side-panel-body-padding);
+    }
+    &.side-panel__body--padded-x {
+      padding-inline: var(--_op-side-panel-body-padding);
+    }
+    &.side-panel__body--padded-y {
+      padding-block: var(--_op-side-panel-body-padding);
+    }
+  }
+  .side-panel__footer {
+    &.side-panel__footer--padded {
+      padding: var(--_op-side-panel-footer-padding);
+    }
+    &.side-panel__footer--padded-x {
+      padding-inline: var(--_op-side-panel-footer-padding);
+    }
+    &.side-panel__footer--padded-y {
+      padding-block: var(--_op-side-panel-footer-padding);
+    }
+  }
+  .side-panel__section {
+    &.side-panel__section--padded {
+      padding: var(--_op-side-panel-section-padding);
+    }
+    &.side-panel__section--padded-x {
+      padding-inline: var(--_op-side-panel-section-padding);
+    }
+    &.side-panel__section--padded-y {
+      padding-block: var(--_op-side-panel-section-padding);
+    }
+  }
 }
 
 .spinner {
+  /* Public API (customizable component options) */
   --_op-spinner-indicator-color: var(--op-color-primary-base);
   --_op-spinner-track-color: var(--op-color-neutral-plus-four);
   --_op-spinner-track-width-x-small: var(--op-border-width);
   --_op-spinner-track-width-small: var(--op-border-width-large);
   --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
   --_op-spinner-track-width-large: var(--op-border-width-x-large);
-  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit));
-  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit));
-  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit));
-  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit));
+  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
+  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
+  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
+  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
   --_op-spinner-animation-duration: 0.8s;
   --_op-spinner-animation-timing-function: linear;
+  /* Private API (component option defaults) */
   --__op-spinner-diameter: var(--_op-spinner-diameter-large);
   --__op-spinner-track-width: var(--_op-spinner-track-width-large);
   width: var(--__op-spinner-diameter);
@@ -3649,22 +3679,22 @@ dialog.modal.modal--closing::backdrop {
   border-radius: var(--__op-spinner-diameter);
   border-top-color: var(--_op-spinner-indicator-color);
   animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
-}
-.spinner--x-small.spinner {
-  --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
-  --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
-}
-.spinner--small.spinner {
-  --__op-spinner-diameter: var(--_op-spinner-diameter-small);
-  --__op-spinner-track-width: var(--_op-spinner-track-width-small);
-}
-.spinner--medium.spinner {
-  --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
-  --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
-}
-.spinner--large.spinner {
-  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
-  --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+  &.spinner--x-small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
+  }
+  &.spinner--small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
+  }
+  &.spinner--medium {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
+  }
+  &.spinner--large {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+  }
 }
 
 @keyframes spinner {
@@ -3673,12 +3703,14 @@ dialog.modal.modal--closing::backdrop {
   }
 }
 .switch {
-  --_op-switch-height-small: calc(4 * var(--op-size-unit));
-  --_op-switch-height-large: calc(6 * var(--op-size-unit));
-  --_op-switch-width-small: calc(7 * var(--op-size-unit));
-  --_op-switch-width-large: calc(11 * var(--op-size-unit));
+  /* Public API (allowed to be overridden) */
+  --_op-switch-height-small: calc(4 * var(--op-size-unit)); /* 16px */
+  --_op-switch-height-large: calc(6 * var(--op-size-unit)); /* 24px */
+  --_op-switch-width-small: calc(7 * var(--op-size-unit)); /* 28px */
+  --_op-switch-width-large: calc(11 * var(--op-size-unit)); /* 44px */
   --_op-switch-opacity-disabled: var(--op-opacity-disabled);
   --_op-switch-switch-padding: var(--op-space-2x-small);
+  /* Private API (don't touch these) */
   --__op-switch-width: var(--_op-switch-width-large);
   --__op-switch-height: var(--_op-switch-height-large);
   --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
@@ -3686,72 +3718,78 @@ dialog.modal.modal--closing::backdrop {
   position: relative;
   display: flex;
   align-items: center;
-}
-.switch input {
-  width: 0;
-  height: 0;
-  margin-right: calc(-1 * var(--op-space-x-small));
-}
-.switch input:disabled {
-  visibility: hidden;
-}
-.switch input:disabled + label {
-  cursor: not-allowed;
-  opacity: var(--_op-switch-opacity-disabled);
-}
-.switch input:checked + label {
-  background-color: var(--op-color-primary-base);
-  box-shadow: none;
-}
-.switch input:checked + label::after {
-  left: calc(100% - var(--__op-switch-half-switch-padding));
-  transform: translateX(-100%);
-}
-.switch input:hover + label::after {
-  background-color: var(--op-color-primary-plus-five);
-}
-.switch input:focus-visible + label {
-  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six), inset var(--op-border-all) var(--op-color-primary-minus-three);
-}
-.switch input:focus-visible + label::after {
-  background-color: var(--op-color-neutral-plus-five);
-  box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
-}
-.switch input:focus-visible:checked + label::after {
-  background-color: var(--op-color-primary-plus-six);
-  box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
-}
-.switch label {
-  position: relative;
-  display: block;
-  width: var(--__op-switch-width);
-  height: var(--__op-switch-height);
-  border-radius: var(--op-radius-pill);
-  background: var(--op-color-neutral-base);
-  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
-  text-indent: -9999px;
-}
-.switch label::after {
-  position: absolute;
-  top: var(--__op-switch-half-switch-padding);
-  left: var(--__op-switch-half-switch-padding);
-  width: var(--__op-switch-switch-size);
-  height: var(--__op-switch-switch-size);
-  border-radius: var(--op-radius-circle);
-  background-color: var(--op-color-neutral-plus-eight);
-  content: "";
-  transition: var(--op-transition-input);
-}
-.switch--small.switch {
-  --__op-switch-width: var(--_op-switch-width-small);
-  --__op-switch-height: var(--_op-switch-height-small);
-}
-.switch--large.switch {
-  --__op-switch-width: var(--_op-switch-width-large);
-  --__op-switch-height: var(--_op-switch-height-large);
-}
-.switch + label {
-  width: fit-content;
+  label {
+    position: relative;
+    display: block;
+    width: var(--__op-switch-width);
+    height: var(--__op-switch-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-color-neutral-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
+    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */
+    &::after {
+      position: absolute;
+      width: var(--__op-switch-switch-size);
+      height: var(--__op-switch-switch-size);
+      border-radius: var(--op-radius-circle);
+      background-color: var(--op-color-neutral-plus-eight);
+      content: "";
+      inset-block-start: var(--__op-switch-half-switch-padding);
+      inset-inline-start: var(--__op-switch-half-switch-padding);
+      transition: var(--op-transition-input);
+    }
+  }
+  /* Prevent labels after the toggle being full width */
+  & + label {
+    width: fit-content;
+  }
+  input {
+    width: 0;
+    height: 0;
+    margin-inline-end: calc(-1 * var(--op-space-x-small));
+    &:disabled {
+      visibility: hidden;
+    }
+    &:disabled + label {
+      cursor: not-allowed;
+      opacity: var(--_op-switch-opacity-disabled);
+    }
+    &:checked + label {
+      background-color: var(--op-color-primary-base);
+      box-shadow: none;
+      &::after {
+        left: calc(100% - var(--__op-switch-half-switch-padding));
+        transform: translateX(-100%);
+      }
+    }
+    &:hover + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-five);
+      }
+    }
+    &:focus-visible + label {
+      box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six), inset var(--op-border-all) var(--op-color-primary-minus-three);
+      &::after {
+        background-color: var(--op-color-neutral-plus-five);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
+      }
+    }
+    &:focus-visible:checked + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-six);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
+      }
+    }
+  }
+  /* Size Modifiers */
+  &.switch--small {
+    --__op-switch-width: var(--_op-switch-width-small);
+    --__op-switch-height: var(--_op-switch-height-small);
+  }
+  &.switch--large {
+    --__op-switch-width: var(--_op-switch-width-large);
+    --__op-switch-height: var(--_op-switch-height-large);
+  }
 }
 
 .tab-group {
@@ -3760,6 +3798,7 @@ dialog.modal.modal--closing::backdrop {
 }
 
 .tab {
+  /* Public API */
   --_op-tab-font-small: var(--op-font-x-small);
   --_op-tab-font-large: var(--op-font-small);
   --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
@@ -3767,6 +3806,7 @@ dialog.modal.modal--closing::backdrop {
   --_op-tab-indicator-width-small: var(--op-border-width-large);
   --_op-tab-indicator-width-large: var(--op-border-width-x-large);
   --_op-tab-disabled-opacity: var(--op-opacity-disabled);
+  /* Private API */
   --__op-tab-font-size: var(--_op-tab-font-large);
   --__op-tab-padding: var(--_op-tab-padding-large);
   --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
@@ -3776,38 +3816,45 @@ dialog.modal.modal--closing::backdrop {
   color: var(--op-color-on-background);
   font-size: var(--__op-tab-font-size);
   text-decoration: none;
-}
-.tab--active.tab {
-  box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
-}
-.tab:focus, .tab:focus-within, .tab:focus-visible {
-  outline: none;
-}
-.tab:focus-visible:not(.tab--disabled) {
-  z-index: 1;
-  box-shadow: var(--op-input-focus-primary);
-}
-.tab:focus-visible:not(.tab--disabled).tab--active {
-  box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
-}
-.tab--disabled.tab {
-  opacity: var(--_op-tab-disabled-opacity);
-  pointer-events: none;
-}
-.tab:hover {
-  background-color: var(--op-color-primary-plus-seven);
-  box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
-  color: var(--op-color-primary-on-plus-seven);
-}
-.tab--small.tab {
-  --__op-tab-padding: var(--_op-tab-padding-small);
-  --__op-tab-font-size: var(--_op-tab-font-small);
-  --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
-}
-.tab--large.tab {
-  --__op-tab-padding: var(--_op-tab-padding-large);
-  --__op-tab-font-size: var(--_op-tab-font-large);
-  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  &.tab--active {
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
+  }
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+  /* Hover State */
+  &:hover {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-plus-seven);
+  }
+  /* Focus State */
+  &:focus-visible:not(.tab--disabled) {
+    z-index: 1;
+    box-shadow: var(--op-input-focus-primary);
+    &.tab--active {
+      box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
+    }
+  }
+  /* Disabled State */
+  &.tab--disabled {
+    opacity: var(--_op-tab-disabled-opacity);
+    pointer-events: none;
+  }
+  /* Size Modifiers */
+  &.tab--small {
+    --__op-tab-padding: var(--_op-tab-padding-small);
+    --__op-tab-font-size: var(--_op-tab-font-small);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
+  }
+  &.tab--large {
+    --__op-tab-padding: var(--_op-tab-padding-large);
+    --__op-tab-font-size: var(--_op-tab-font-large);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  }
 }
 
 .table-container, .table-danger, .table-primary, .table {
@@ -3904,7 +3951,7 @@ dialog.modal.modal--closing::backdrop {
   overflow-y: auto;
 }
 
-.tag-notice, .tag-info, .tag-warning, .tag-danger, .tag-primary, .tag-readonly {
+.tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3918,167 +3965,183 @@ dialog.modal.modal--closing::backdrop {
   line-height: var(--op-line-height-dense);
   user-select: none;
   white-space: nowrap;
-}
-.tag-notice .tag__label, .tag-info .tag__label, .tag-warning .tag__label, .tag-danger .tag__label, .tag-primary .tag__label, .tag-readonly .tag__label {
-  padding-inline: var(--op-space-2x-small);
-}
-.tag-notice .btn--icon, .tag-info .btn--icon, .tag-warning .btn--icon, .tag-danger .btn--icon, .tag-primary .btn--icon, .tag-readonly .btn--icon {
-  --__op-btn-height: var(--op-font-medium);
-}
-.tag-notice .btn--icon:hover, .tag-info .btn--icon:hover, .tag-warning .btn--icon:hover, .tag-danger .btn--icon:hover, .tag-primary .btn--icon:hover, .tag-readonly .btn--icon:hover {
-  background-color: var(--op-color-neutral-minus-three);
-  box-shadow: none;
-  color: var(--op-color-neutral-on-minus-three);
-}
-.tag-notice .btn--icon:focus-visible, .tag-info .btn--icon:focus-visible, .tag-warning .btn--icon:focus-visible, .tag-danger .btn--icon:focus-visible, .tag-primary .btn--icon:focus-visible, .tag-readonly .btn--icon:focus-visible {
-  background-color: var(--op-color-neutral-base);
-  box-shadow: var(--op-input-focus-neutral);
-  color: var(--op-color-neutral-on-base);
-}
-
-.tag-primary {
-  background-color: var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-.tag-primary .btn--icon {
-  color: var(--op-color-primary-on-base);
-}
-.tag-primary .btn--icon:hover {
-  background-color: var(--op-color-primary-minus-three);
-  box-shadow: none;
-  color: var(--op-color-primary-on-minus-three);
-}
-.tag-primary .btn--icon:focus-visible {
-  background-color: var(--op-color-primary-base);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-base);
-}
-
-.tag-danger {
-  background-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-danger .btn--icon {
-  color: var(--op-color-alerts-danger-on-base);
-}
-.tag-danger .btn--icon:hover {
-  background-color: var(--op-color-alerts-danger-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-danger-on-minus-three);
-}
-.tag-danger .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-danger-base);
-  box-shadow: var(--op-input-focus-danger);
-  color: var(--op-color-alerts-danger-on-base);
-}
-
-.tag-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-warning .btn--icon {
-  color: var(--op-color-alerts-warning-on-base);
-}
-.tag-warning .btn--icon:hover {
-  background-color: var(--op-color-alerts-warning-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-warning-on-minus-three);
-}
-.tag-warning .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-warning-base);
-  box-shadow: var(--op-input-focus-warning);
-  color: var(--op-color-alerts-warning-on-base);
-}
-
-.tag-info {
-  background-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-info .btn--icon {
-  color: var(--op-color-alerts-info-on-base);
-}
-.tag-info .btn--icon:hover {
-  background-color: var(--op-color-alerts-info-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-info-on-minus-three);
-}
-.tag-info .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-info-base);
-  box-shadow: var(--op-input-focus-info);
-  color: var(--op-color-alerts-info-on-base);
-}
-
-.tag-notice {
-  background-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-notice .btn--icon {
-  color: var(--op-color-alerts-notice-on-base);
-}
-.tag-notice .btn--icon:hover {
-  background-color: var(--op-color-alerts-notice-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-notice-on-minus-three);
-}
-.tag-notice .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-notice-base);
-  box-shadow: var(--op-input-focus-notice);
-  color: var(--op-color-alerts-notice-on-base);
+  /* Elements */
+  .tag__label {
+    padding-inline: var(--op-space-2x-small);
+  }
+  .btn--icon {
+    --__op-btn-height: var(--op-font-medium);
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-neutral-minus-three);
+      box-shadow: none;
+      color: var(--op-color-neutral-on-minus-three);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-neutral-base);
+      box-shadow: var(--op-input-focus-neutral);
+      color: var(--op-color-neutral-on-base);
+    }
+  }
+  /* Modifiers */
+  &.tag--read-only {
+    /* This is here for consistency */
+  }
+  &.tag--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+    .btn--icon {
+      color: var(--op-color-primary-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-primary-minus-three);
+        box-shadow: none;
+        color: var(--op-color-primary-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-primary-base);
+        box-shadow: var(--op-input-focus-primary);
+        color: var(--op-color-primary-on-base);
+      }
+    }
+  }
+  &.tag--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-danger-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-danger-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-danger-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-danger-base);
+        box-shadow: var(--op-input-focus-danger);
+        color: var(--op-color-alerts-danger-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-warning-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-warning-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-warning-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-warning-base);
+        box-shadow: var(--op-input-focus-warning);
+        color: var(--op-color-alerts-warning-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-info-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-info-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-info-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-info-base);
+        box-shadow: var(--op-input-focus-info);
+        color: var(--op-color-alerts-info-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-notice-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-notice-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-notice-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-notice-base);
+        box-shadow: var(--op-input-focus-notice);
+        color: var(--op-color-alerts-notice-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
 }
 
 .text-pair {
+  /* Public API (customizable component options) */
   --_op-text-pair-font-size-small: var(--op-font-small);
   --_op-text-pair-font-size-medium: var(--op-font-medium);
   --_op-text-pair-font-size-large: var(--op-font-large);
+  /* Private API (component option defaults) */
   --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
   --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
   display: flex;
   flex-direction: column;
   gap: var(--op-space-x-small);
-}
-.text-pair--inline.text-pair {
-  flex-direction: row;
-  align-items: baseline;
-}
-.text-pair .text-pair__title {
-  font-size: var(--__op-text-pair-title-font-size);
-  font-weight: var(--op-font-weight-semi-bold);
-  line-height: var(--op-line-height-dense);
-}
-.text-pair .text-pair__title.text-pair__title--small {
-  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
-}
-.text-pair .text-pair__title.text-pair__title--medium {
-  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
-}
-.text-pair .text-pair__title.text-pair__title--large {
-  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
-}
-.text-pair .text-pair__subtitle {
-  font-size: var(--__op-text-pair-subtitle-font-size);
-  font-weight: var(--op-font-weight-normal);
-  line-height: var(--op-line-height-dense);
-}
-.text-pair .text-pair__subtitle.text-pair__subtitle--small {
-  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
-}
-.text-pair .text-pair__subtitle.text-pair__subtitle--medium {
-  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
-}
-.text-pair .text-pair__subtitle.text-pair__subtitle--large {
-  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
+  &.text-pair--inline {
+    flex-direction: row;
+    align-items: baseline;
+  }
+  .text-pair__title {
+    font-size: var(--__op-text-pair-title-font-size);
+    font-weight: var(--op-font-weight-semi-bold);
+    line-height: var(--op-line-height-dense);
+    &.text-pair__title--small {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
+    }
+    &.text-pair__title--medium {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
+    }
+    &.text-pair__title--large {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
+    }
+  }
+  .text-pair__subtitle {
+    font-size: var(--__op-text-pair-subtitle-font-size);
+    font-weight: var(--op-font-weight-normal);
+    line-height: var(--op-line-height-dense);
+    &.text-pair__subtitle--small {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
+    }
+    &.text-pair__subtitle--medium {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
+    }
+    &.text-pair__subtitle--large {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
+    }
+  }
 }
 
+/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
 [data-tooltip-text] {
-  --_op-tooltip-max-width: calc(50 * var(--op-size-unit));
+  /* Public API (customizable component options) */
+  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */
   --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
   --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
   --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
@@ -4087,92 +4150,109 @@ dialog.modal.modal--closing::backdrop {
   --_op-tooltip-tooltip-radius: var(--op-radius-medium);
   --_op-tooltip-tooltip-font-size: var(--op-font-small);
   position: relative;
-}
-[data-tooltip-text]::before, [data-tooltip-text]::after {
-  opacity: var(--op-opacity-none);
-  transition: var(--op-transition-tooltip);
-  visibility: hidden;
-}
-[data-tooltip-text]::before {
-  position: absolute;
-  z-index: var(--op-z-index-tooltip);
-  display: block;
-  width: max-content;
-  max-width: var(--_op-tooltip-max-width);
-  padding: var(--_op-tooltip-padding);
-  border-radius: var(--_op-tooltip-tooltip-radius);
-  background-color: var(--_op-tooltip-background-color);
-  color: var(--_op-tooltip-text-color);
-  content: attr(data-tooltip-text);
-  font-family: var(--op-font-family);
-  font-size: var(--_op-tooltip-tooltip-font-size);
-  overflow-wrap: break-word;
-  pointer-events: none;
-  text-align: center;
-  white-space: normal;
-}
-[data-tooltip-text]::after {
-  position: absolute;
-  z-index: var(--op-z-index-tooltip);
-  border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
-  content: "";
-  pointer-events: none;
-}
-[data-tooltip-text]:hover::before, [data-tooltip-text]:hover::after {
-  opacity: var(--op-opacity-full);
-  visibility: visible;
-}
-[data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::before, [data-tooltip-text]:not([data-tooltip-position])::after {
-  left: 50%;
-  transform: translateX(-50%);
-}
-[data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-text]:not([data-tooltip-position])::before {
-  bottom: 100%;
-  margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::after {
-  bottom: 100%;
-  border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
-  margin-bottom: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=left][data-tooltip-text]::before, [data-tooltip-position=left][data-tooltip-text]::after {
-  top: 50%;
-  transform: translateY(-50%);
-}
-[data-tooltip-position=left][data-tooltip-text]::before {
-  right: 100%;
-  margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=left][data-tooltip-text]::after {
-  right: 100%;
-  border-color: transparent transparent transparent var(--_op-tooltip-background-color);
-  margin-right: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=bottom][data-tooltip-text]::before, [data-tooltip-position=bottom][data-tooltip-text]::after {
-  left: 50%;
-  transform: translateX(-50%);
-}
-[data-tooltip-position=bottom][data-tooltip-text]::before {
-  top: 100%;
-  margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=bottom][data-tooltip-text]::after {
-  top: 100%;
-  border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
-  margin-top: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=right][data-tooltip-text]::before, [data-tooltip-position=right][data-tooltip-text]::after {
-  top: 50%;
-  transform: translateY(-50%);
-}
-[data-tooltip-position=right][data-tooltip-text]::before {
-  left: 100%;
-  margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-}
-[data-tooltip-position=right][data-tooltip-text]::after {
-  left: 100%;
-  border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
-  margin-left: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+  &::before,
+  &::after {
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-tooltip);
+    visibility: hidden;
+  }
+  &::before {
+    position: absolute;
+    z-index: var(--op-z-index-tooltip);
+    display: block;
+    width: max-content;
+    max-width: var(--_op-tooltip-max-width);
+    padding: var(--_op-tooltip-padding);
+    border-radius: var(--_op-tooltip-tooltip-radius);
+    background-color: var(--_op-tooltip-background-color);
+    color: var(--_op-tooltip-text-color);
+    content: attr(data-tooltip-text);
+    font-family: var(--op-font-family); /* Makes tooltips on icons work */
+    font-size: var(--_op-tooltip-tooltip-font-size);
+    overflow-wrap: break-word;
+    pointer-events: none;
+    text-align: center;
+    white-space: normal;
+  }
+  &::after {
+    position: absolute;
+    z-index: var(--op-z-index-tooltip);
+    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
+    content: "";
+    pointer-events: none;
+  }
+  &:hover {
+    &::before,
+    &::after {
+      opacity: var(--op-opacity-full);
+      visibility: visible;
+    }
+  }
+  &[data-tooltip-position=top],
+  &:not([data-tooltip-position]) {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+    &::before {
+      inset-block-end: 100%;
+      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+    &::after {
+      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
+      inset-block-end: 100%;
+      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+  &[data-tooltip-position=left] {
+    &::before,
+    &::after {
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+    &::before {
+      inset-inline-end: 100%;
+      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+    &::after {
+      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
+      inset-inline-end: 100%;
+      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+  &[data-tooltip-position=bottom] {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+    &::before {
+      inset-block-start: 100%;
+      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+    &::after {
+      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
+      inset-block-start: 100%;
+      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+  &[data-tooltip-position=right] {
+    &::before,
+    &::after {
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+    &::before {
+      inset-inline-start: 100%;
+      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+    &::after {
+      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
+      inset-inline-start: 100%;
+      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
 }
 
 /*# sourceMappingURL=optics.css.map */