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, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host {
--visual-picker-item-border-radius: var(--border-radius-medium);
--visual-picker-item-border-width: var(--border-width);
--visual-picker-item-border-width-checked: calc(var(--border-width) * 3);
--visual-picker-item-border-color: var(--border-color-interactive);
cursor: default;
display: flex;
}
.picker-item {
--visual-picker-item-border-radius-inner: calc(var(--visual-picker-item-border-radius) - var(--visual-picker-item-border-width));
overflow: hidden;
border: var(--visual-picker-item-border-width) solid var(--visual-picker-item-border-color);
border-radius: var(--visual-picker-item-border-radius);
/* The margin needs to account for the increased border-width on the checked item. */
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
margin: calc(var(--visual-picker-item-border-width-checked) - var(--visual-picker-item-border-width));
flex: 1;
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&[checked] {
--visual-picker-item-border-width: var(--visual-picker-item-border-width-checked);
border-color: var(--border-color-selected);
margin: 0;
}
::slotted(:first-child) {
--visual-picker-item-child-border-radius: var(--visual-picker-item-border-radius-inner);
border-radius: var(--visual-picker-item-child-border-radius);
}
.text-content:has(.label, .description) {
padding: var(--space-small) var(--space-medium) var(--space-medium);
text-align: center;
}
.label {
margin: 0;
}
.description {
margin: 0;
font-size: var(--font-size-small);
color: var(--text-color-deemphasized);
}
.label + .description {
margin-block-start: var(--space-xsmall);
}
img {
display: block;
width: 100%;
}
}
.image-item {
background-color: var(--background-color-box);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
background-color: var(--button-background-color-hover);
}
&:hover:active {
background-color: var(--button-background-color-active);
}
}