Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
.nova-enabled .clocks-widget {
@include widget-base-style;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- Using newtab variables from _variables.scss.
height: var(--newtab-card-height-small);
transition: height var(--widget-size-transition-duration) var(--widget-size-transition-easing);
&.large-widget {
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- Using newtab variables from _variables.scss.
height: var(--newtab-card-height);
}
.widget-toolbar {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
block-size: 75px; // Figma-spec toolbar lane height.
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: var(--space-small);
padding: var(--space-medium);
border-start-start-radius: var(--border-radius-large);
border-start-end-radius: var(--border-radius-large);
opacity: 0;
// Use shared size-change transition variables from widget-base-style mixin
// so all widgets animate size changes consistently.
transition:
opacity 180ms ease,
block-size var(--widget-size-transition-duration) var(--widget-size-transition-easing),
padding var(--widget-size-transition-duration) var(--widget-size-transition-easing);
pointer-events: none;
z-index: 1;
// Invisible toolbar shouldn't eat pointer events for the rows below.
moz-button {
opacity: 0;
pointer-events: none;
transform: translateY(-0.125rem);
transition:
opacity 140ms ease,
transform 140ms ease;
}
panel-list {
pointer-events: auto;
}
}
// `type="icon primary"` hits icon styles but not the primary color
// (moz-button matches `[type="primary"]` exactly). Apply primary via
// ::part(button) so the + buttons render solid purple.
.clocks-add-button::part(button),
.clocks-edit-add-button::part(button) {
background-color: var(--button-background-color-primary);
border-color: var(--button-border-color-primary);
color: var(--button-text-color-primary);
}
.clocks-add-button:hover::part(button),
.clocks-edit-add-button:hover::part(button) {
background-color: var(--button-background-color-primary-hover);
color: var(--button-text-color-primary-hover);
}
.clocks-add-button:hover:active::part(button),
.clocks-edit-add-button:hover:active::part(button) {
background-color: var(--button-background-color-primary-active);
color: var(--button-text-color-primary-active);
}
&:hover .widget-toolbar,
&:focus-within .widget-toolbar {
opacity: 1;
}
&:hover .widget-toolbar moz-button,
&:focus-within .widget-toolbar moz-button {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
// Suppress only :hover (not :focus-within) so a keyboard user can
// always tab back in for the toolbar. Cleared on mouseleave.
&.is-dismissed .widget-toolbar:hover {
opacity: 0;
}
&.is-dismissed .widget-toolbar:hover moz-button {
opacity: 0;
pointer-events: none;
transform: translateY(-0.125rem);
}
@media (prefers-reduced-motion: reduce) {
transition: none;
.widget-toolbar {
transition: none;
}
.widget-toolbar moz-button {
transition: none;
}
.clocks-list,
.clocks-row,
.clocks-meta,
.clocks-label,
.clocks-city,
.clocks-timezone,
.clocks-time,
.clocks-edit-item,
.clocks-edit-item-actions {
transition: none;
}
.clocks-edit-item:hover .clocks-edit-item-actions,
.clocks-edit-item:focus-within .clocks-edit-item-actions {
transition: none;
}
}
.clocks-panel {
position: absolute;
z-index: 2;
inset-block-start: var(--space-xsmall);
inset-inline-end: var(--space-small);
display: flex;
flex-direction: column;
gap: var(--space-medium);
// 332px is the Figma-spec overlay width; no design token exists.
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
inline-size: min(332px, calc(100% - var(--space-large)));
// Figma-spec panel height; no design token exists.
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
block-size: 276px;
padding: var(--space-medium);
background: var(--newtab-background-card);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-large);
box-shadow: var(--box-shadow-level-4);
}
.clocks-location-wrapper {
position: relative;
}
.clocks-search-location-input {
min-inline-size: 0;
inline-size: 100%;
}
.clocks-search-results {
position: absolute;
inset-block-start: calc(100% + var(--space-xxsmall));
inset-inline: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-xxsmall);
// 180px fits ~4–5 results before scrolling; no design token for this size.
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
max-block-size: 180px;
overflow-y: auto;
padding: var(--space-xsmall);
background: var(--newtab-background-card);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-level-4);
}
.clocks-search-no-results {
color: var(--text-color-deemphasized);
font-size: var(--font-size-small);
padding-inline: var(--space-small);
padding-block: var(--space-xsmall);
}
.clocks-nickname-input {
min-inline-size: 0;
inline-size: 100%;
}
.clocks-edit-title {
margin: 0;
color: var(--text-color);
font-size: var(--font-size-root);
font-weight: var(--font-weight-semibold);
}
.clocks-edit-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-small);
}
.clocks-edit-title-group {
display: flex;
align-items: center;
gap: var(--space-small);
min-inline-size: 0;
}
.clocks-edit-list {
display: flex;
flex-direction: column;
gap: var(--space-small);
flex: 1 1 0;
min-block-size: 0;
overflow-y: auto;
margin: 0;
padding: 0;
padding-block-start: var(--space-xxsmall);
padding-inline: var(--space-xxsmall);
list-style: none;
}
.clocks-edit-panel {
flex: 1 1 0;
min-block-size: 0;
}
.clocks-edit-item {
display: flex;
flex-direction: column;
gap: calc(var(--space-xxsmall) / 2);
position: relative;
padding-block: var(--space-small);
padding-inline: var(--space-medium);
padding-inline-end: calc(var(--space-medium) * 4);
border-radius: var(--button-border-radius);
transition: background-color 180ms ease;
}
.clocks-edit-item:hover,
.clocks-edit-item:focus-within {
// stylelint-disable-next-line stylelint-plugin-mozilla/no-base-design-tokens, stylelint-plugin-mozilla/use-design-tokens
background-color: var(--button-background-color-menu-hover, #E7E1F8);
}
.clocks-edit-item:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
.clocks-edit-top-row {
display: flex;
align-items: center;
min-inline-size: 0;
}
.clocks-edit-city {
font-size: var(--font-size-small);
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clocks-edit-item-actions {
display: flex;
align-items: center;
position: absolute;
inset-inline-end: var(--space-medium);
inset-block: 0;
margin-block: auto;
block-size: fit-content;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 180ms ease,
visibility 0s linear 180ms;
}
.clocks-edit-item:hover .clocks-edit-item-actions,
.clocks-edit-item:focus-within .clocks-edit-item-actions {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 180ms ease,
visibility 0s;
}
.clocks-edit-item-button::part(button) {
border: var(--border-width) solid transparent;
border-radius: var(--border-radius-circle);
block-size: var(--size-item-large);
inline-size: var(--size-item-large);
padding: var(--space-xsmall);
--button-icon-fill: var(--icon-color);
color: var(--icon-color);
}
.clocks-edit-item-button:hover::part(button),
.clocks-edit-item-button:focus-visible::part(button) {
/* stylelint-disable-next-line stylelint-plugin-mozilla/no-base-design-tokens, stylelint-plugin-mozilla/use-design-tokens */
border-color: rgb(255 255 255 / 90%);
}
.clocks-edit-subtitle {
color: var(--text-color-deemphasized);
font-size: var(--font-size-small);
font-weight: var(--font-weight);
}
.clocks-add-actions {
margin-block-start: auto;
align-self: center;
}
.clocks-search-result {
display: flex;
align-items: center;
gap: var(--space-small);
padding-inline: var(--space-small);
padding-block: var(--space-xsmall);
background: transparent;
border: none;
border-radius: var(--border-radius-small);
color: var(--text-color);
font: inherit;
text-align: start;
cursor: default;
&:hover,
&:focus {
background: var(--button-background-color-hover);
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
.clocks-search-result-city,
.clocks-search-result-timezone {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clocks-search-result-timezone {
color: var(--text-color-deemphasized);
font-size: var(--font-size-small);
}
.clocks-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex: 1 1 auto;
min-block-size: 0;
transition:
padding-block-start var(--widget-size-transition-duration) var(--widget-size-transition-easing),
gap var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
&:not(.is-panel-open):hover .clocks-list,
&:not(.is-panel-open):focus-within .clocks-list {
// Reserve header room for the hover controls so they don't overlap the
// first visible clock row.
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
padding-block-start: 2.25rem;
}
.clocks-row {
display: flex;
align-items: center;
color: var(--text-color);
min-inline-size: 0;
transition:
gap var(--widget-size-transition-duration) var(--widget-size-transition-easing),
padding var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
.clocks-row-actions {
display: none;
align-items: center;
gap: var(--space-small);
margin-inline-start: auto;
}
.clocks-row-action-button::part(button) {
border: var(--border-width) solid var(--button-border-color);
border-radius: var(--border-radius-circle);
block-size: var(--size-item-large);
inline-size: var(--size-item-large);
padding: var(--space-small);
--button-icon-fill: var(--icon-color);
color: var(--icon-color);
}
.clocks-row.has-inline-actions:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
border-radius: var(--border-radius-small);
}
// Large-only: time and actions share one grid cell so toggling
// between them doesn't reflow the row. Medium rows are column-
// direction; the same grid there would collapse meta to ~the time's
// max-content and clip the city.
&.large-widget .clocks-row.has-inline-actions.hides-time-on-inline-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
.clocks-meta {
grid-column: 1;
}
.clocks-time,
.clocks-row-actions {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
.clocks-row-actions {
display: flex;
margin-inline-start: 0;
visibility: hidden;
pointer-events: none;
}
&:hover .clocks-row-actions,
&:focus-within .clocks-row-actions {
visibility: visible;
pointer-events: auto;
}
&:hover .clocks-time,
&:focus-within .clocks-time {
visibility: hidden;
}
}
.clocks-row.has-inline-actions:hover .clocks-row-actions,
.clocks-row.has-inline-actions:focus-within .clocks-row-actions {
display: flex;
}
// Medium collapses the time so the action buttons take its place.
&.medium-widget .clocks-row.has-inline-actions.hides-time-on-inline-actions:hover .clocks-time,
&.medium-widget .clocks-row.has-inline-actions.hides-time-on-inline-actions:focus-within .clocks-time {
display: none;
}
.clocks-meta {
display: flex;
align-items: center;
gap: var(--space-small);
min-inline-size: 0;
flex: 1 1 auto;
transition: gap var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
.clocks-label {
display: flex;
flex-direction: column;
min-inline-size: 0;
gap: var(--space-xxsmall);
transition: gap var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
.clocks-label-chip {
display: inline-block;
padding-block: var(--space-xsmall);
padding-inline: var(--space-small);
border-radius: var(--border-radius-large);
font-size: var(--font-size-root);
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-inline-size: 0;
max-inline-size: 100%;
// Palette-0 tokens are light-mode-only; light-dark() with the -80
// shade is the design-system idiom. No semantic tokens exist for
// this label-chip palette, so base primitives are intentional here.
/* stylelint-disable stylelint-plugin-mozilla/no-base-design-tokens, stylelint-plugin-mozilla/use-design-tokens */
&.clocks-chip-cyan {
background-color: light-dark(var(--color-cyan-0), var(--color-cyan-80));
}
&.clocks-chip-green {
background-color: light-dark(var(--color-green-0), var(--color-green-80));
}
&.clocks-chip-yellow {
background-color: light-dark(var(--color-yellow-0), var(--color-yellow-80));
}
&.clocks-chip-purple {
background-color: light-dark(var(--color-purple-0), var(--color-purple-80));
}
&.clocks-chip-red {
background-color: light-dark(var(--color-red-0), var(--color-red-80));
}
&.clocks-chip-orange {
background-color: light-dark(var(--color-orange-0), var(--color-orange-80));
}
&.clocks-chip-blue {
background-color: light-dark(var(--color-blue-0), var(--color-blue-80));
}
&.clocks-chip-pink {
background-color: light-dark(var(--color-pink-0), var(--color-pink-80));
}
&.clocks-chip-violet {
background-color: light-dark(var(--color-violet-0), var(--color-violet-80));
}
&.clocks-chip-neutral {
background-color: light-dark(var(--color-gray-0), var(--color-gray-80));
}
/* stylelint-enable stylelint-plugin-mozilla/no-base-design-tokens, stylelint-plugin-mozilla/use-design-tokens */
}
&.large-widget[data-clock-count='1'] .clocks-meta,
&.large-widget[data-clock-count='2'] .clocks-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-small);
}
&.large-widget[data-clock-count='1'] .clocks-label-chip,
&.large-widget[data-clock-count='2'] .clocks-label-chip {
padding-block: var(--space-small);
padding-inline: var(--space-large);
}
// No --space-* token for 6px.
&.large-widget[data-clock-count='3'] .clocks-label-chip,
&.large-widget[data-clock-count='4'] .clocks-label-chip {
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list
padding-block: 0.375rem;
justify-self: start;
}
// Shared city column keeps rows aligned. Wide enough to fit most major
// city names (e.g. "Los Angeles"); longer names ellipsize. Chip column
// (1fr) has a min size so an 11-char capitalized nickname fits without
// truncation.
&.large-widget[data-clock-count='3'] .clocks-meta,
&.large-widget[data-clock-count='4'] .clocks-meta {
display: grid;
grid-template-columns: 9ch minmax(9ch, 1fr);
}
// No clock has a nickname: drop the chip column so the city can use the
// full row width instead of being capped at 9ch.
&.large-widget.has-no-labels[data-clock-count='3'] .clocks-meta,
&.large-widget.has-no-labels[data-clock-count='4'] .clocks-meta {
grid-template-columns: 1fr;
}
.clocks-city {
font-size: var(--font-size-root);
font-weight: var(--font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: font-size var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
.clocks-timezone {
font-size: var(--font-size-small);
color: var(--text-color-deemphasized);
transition: font-size var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
.clocks-time {
// SF Pro Semibold (590) maps to --font-weight-semibold (600).
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
transition: font-size var(--widget-size-transition-duration) var(--widget-size-transition-easing);
}
&.small-widget.is-hero {
.clocks-list {
flex-direction: column;
justify-content: space-between;
align-items: stretch;
gap: 0;
}
.clocks-row {
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 0;
gap: var(--space-xsmall);
}
// Stop .clocks-meta stretching so space-between has room to
// distribute; otherwise city/TZ vertically-centres instead of top.
.clocks-meta {
flex: 0 0 auto;
}
.clocks-label {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xxsmall);
}
.clocks-timezone {
display: initial;
}
.clocks-time {
font-size: var(--font-size-heading-large);
align-self: flex-start;
}
}
&.small-widget {
.widget-toolbar {
block-size: var(--size-item-large);
padding-block-start: var(--space-xxsmall);
padding-block-end: 0;
padding-inline-end: var(--space-large);
}
.widget-toolbar moz-button::part(button) {
// Small 2x2 widgets need a slightly smaller toolbar button so the
// keyboard focus ring can fit cleanly in the top-right corner.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
block-size: 1.75rem;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
inline-size: 1.75rem;
}
.widget-toolbar moz-button {
/* moz-button draws its focus ring from the internal button background
using this variable, so tighten the offset at the host level. */
--focus-outline-offset: calc(var(--focus-outline-inset) - 1px);
}
.clocks-list {
flex-direction: column;
justify-content: center;
gap: var(--space-small);
}
.clocks-row {
flex: 1 1 0;
justify-content: space-between;
gap: var(--space-small);
align-items: center;
padding: var(--space-small);
}
.clocks-label {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xxsmall);
}
.clocks-time {
font-size: var(--font-size-root);
}
&[data-clock-count='3'] .clocks-timezone,
&[data-clock-count='4'] .clocks-timezone {
display: none;
}
&[data-clock-count='3'] .clocks-row {
flex: 0 0 auto;
padding-block: var(--space-xsmall);
}
&[data-clock-count='4'] {
.clocks-list {
// No --space-* token for 6px.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list
gap: 0.375rem;
}
.clocks-row {
flex: 0 0 auto;
padding-block: var(--space-xxsmall);
padding-inline: var(--space-xsmall);
}
}
}
&.small-widget:not(.is-panel-open):hover .clocks-list,
&.small-widget:not(.is-panel-open):focus-within .clocks-list {
justify-content: flex-start;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
padding-block-start: 1.5rem;
}
&.small-widget[data-clock-count='2']:not(.is-panel-open):hover .clocks-list,
&.small-widget[data-clock-count='2']:not(.is-panel-open):focus-within .clocks-list {
/* Two full rows with timezone text need a slightly smaller header lane. */
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
padding-block-start: 1rem;
}
&.small-widget[data-clock-count='2']:not(.is-panel-open):hover .clocks-row,
&.small-widget[data-clock-count='2']:not(.is-panel-open):focus-within .clocks-row {
padding-block: var(--space-xsmall);
}
&.small-widget[data-clock-count='4']:not(.is-panel-open):hover .clocks-list,
&.small-widget[data-clock-count='4']:not(.is-panel-open):focus-within .clocks-list {
/* Only the menu remains at 4 clocks, so reserve less header room. */
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
padding-block-start: 0.85rem;
}
&.medium-widget:not(.is-panel-open):hover .clocks-list,
&.medium-widget:not(.is-panel-open):focus-within .clocks-list {
padding-block-start: var(--space-medium);
}
&.medium-widget[data-clock-count='3']:not(.is-panel-open):hover .clocks-list,
&.medium-widget[data-clock-count='3']:not(.is-panel-open):focus-within .clocks-list {
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
padding-block-start: 1.25rem;
}
&.medium-widget[data-clock-count='3']:not(.is-panel-open):hover .clocks-row,
&.medium-widget[data-clock-count='3']:not(.is-panel-open):focus-within .clocks-row {
padding-block: var(--space-small);
}
// 10px inline padding has no --space-* token (scale jumps 0.5->0.75rem).
// Dividers are pseudo-elements to get the 8px top/bottom inset.
&.medium-widget {
.clocks-list {
flex-direction: row;
align-items: stretch;
// 8px gap gives 4px space on each side of the 1px divider.
gap: var(--space-small);
}
.clocks-row {
flex: 1 1 0;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list
padding: var(--space-medium) 0.625rem;
gap: var(--space-xsmall);
position: relative;
}
// Stop .clocks-meta stretching so space-between has room to
// distribute; otherwise city/TZ vertically-centres instead of top.
.clocks-meta {
flex: 0 0 auto;
}
.clocks-row + .clocks-row::before {
content: '';
position: absolute;
// Centre the 1px divider in the 8px list gap.
inset-inline-start: calc(-1 * var(--space-xsmall));
inset-block: var(--space-small);
// Semantic fit for a 1px divider even though it's a border-width token.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
inline-size: var(--border-width);
// No dedicated "divider" token; --border-color is the semantic fit.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
background: var(--border-color);
}
.clocks-time {
font-size: var(--font-size-heading-xlarge);
align-self: flex-start;
}
&[data-clock-count='3'] .clocks-time {
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list
font-size: calc(var(--font-size-heading-large) - 3px);
}
&[data-clock-count='4'] .clocks-time {
align-self: center;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
font-size: var(--font-size-heading-small);
text-align: center;
}
&[data-clock-count='4'] {
.clocks-list {
gap: var(--space-xsmall);
}
.clocks-row {
padding-block: var(--space-xsmall);
// No --space-* token for 6px.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list
padding-inline: 0.375rem;
gap: var(--space-xxsmall);
}
.clocks-row + .clocks-row::before {
inset-inline-start: calc(var(--space-xxsmall) * -1);
inset-block: var(--space-xxsmall);
}
.clocks-row-actions {
align-self: center;
gap: var(--space-xsmall);
margin-inline: 0;
}
.clocks-row-action-button::part(button) {
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
block-size: 1.75rem;
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
inline-size: 1.75rem;
padding: var(--space-xsmall);
}
}
}
&.medium-widget.is-hero {
.clocks-list {
padding-block-start: 0;
}
.clocks-row {
align-items: stretch;
}
.clocks-row-actions {
position: absolute;
inset-inline-end: 0;
inset-block-end: 0;
margin: 0;
}
}
&.large-widget {
.widget-toolbar {
padding-block-start: var(--space-small);
padding-inline-end: var(--space-large);
}
.widget-toolbar moz-button {
--focus-outline-offset: var(--focus-outline-inset);
}
.clocks-list {
flex-direction: column;
}
.clocks-row {
flex: 1 1 0;
justify-content: space-between;
gap: var(--space-medium);
padding-inline-start: var(--space-medium);
padding-inline-end: var(--space-small);
position: relative;
}
.clocks-row + .clocks-row::before {
content: '';
position: absolute;
// inset-block-start is set per clock-count below to centre in gap.
inset-inline: var(--space-small);
// Semantic fit for a 1px divider even though it's a border-width token.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
block-size: var(--border-width);
// No dedicated "divider" token; --border-color is the semantic fit.
// stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens
background: var(--border-color);
}
.clocks-row-actions {
margin-inline-end: var(--space-small);
}
// 2-clock: 16px row gap; 3+: 8px. Divider offsets below centre in each.
&[data-clock-count='2'] {
.clocks-list {
gap: var(--space-medium);
}
.clocks-row + .clocks-row::before {
inset-block-start: calc(-1 * var(--space-small));
}
}
&[data-clock-count='3'],
&[data-clock-count='4'] {
.clocks-list {
gap: var(--space-small);
padding-block-start: 0;
transition-property: gap;
}
.clocks-row + .clocks-row::before {
inset-block-start: calc(-1 * var(--space-xsmall));
}
}
.clocks-time {
font-size: var(--font-size-heading-xlarge);
}
}
&.large-widget.is-hero {
.clocks-row {
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.clocks-label {
gap: var(--space-xsmall);
}
.clocks-city {
font-size: var(--font-size-heading-xlarge);
}
.clocks-timezone {
font-size: var(--font-size-heading-large);
font-weight: var(--font-weight-semibold);
}
.clocks-time {
// 56px doesn't map to any standard font-size token.
/* stylelint-disable-next-line declaration-property-value-disallowed-list, stylelint-plugin-mozilla/use-design-tokens */
font-size: 56px;
align-self: flex-start;
}
.clocks-row-actions {
position: absolute;
inset-inline-end: 0;
inset-block-end: 0;
margin: 0;
}
// Labeled Hero shrinks TZ (22 to 17px) so chip + TZ don't stack too tall.
.clocks-meta:has(.clocks-label-chip) .clocks-timezone {
font-size: var(--font-size-heading-medium);
}
}
&.large-widget.is-hero:not(.is-panel-open):hover .clocks-list,
&.large-widget.is-hero:not(.is-panel-open):focus-within .clocks-list {
padding-block-start: 0;
}
&.large-widget[data-clock-count='2']:not(.is-panel-open):hover .clocks-list,
&.large-widget[data-clock-count='2']:not(.is-panel-open):focus-within .clocks-list {
padding-block-start: 0;
}
}