/* 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/. */ @layer box-common { :host { --box-border-width: var(--border-width); --box-border-color: var(--border-color); --box-border: var(--box-border-width) solid var(--box-border-color); --box-border-radius: var(--border-radius-medium); --box-border-radius-inner: calc(var(--box-border-radius) - var(--border-width)); --box-padding: var(--space-large); --box-icon-size: var(--icon-size); --box-icon-fill: var(--icon-color); border: var(--box-border); border-block-end: var(--box-border-width-end, var(--box-border-width)) solid var(--box-border-color); border-start-start-radius: var(--box-border-radius-start, var(--box-border-radius)); border-start-end-radius: var(--box-border-radius-start, var(--box-border-radius)); border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius)); border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius)); display: block; position: relative; } .text-content { display: grid; place-items: center start; gap: var(--space-xsmall) var(--space-small); grid-template-columns: var(--box-icon-size) 1fr; grid-template-areas: "label label"; &.has-icon { grid-template-areas: "icon label"; } &.has-description { grid-template-areas: "label label" "description description"; } &.has-icon.has-description { grid-template-areas: "icon label" "description description"; } } .label { grid-area: label; font-weight: var(--box-label-font-weight); } .icon { grid-area: icon; width: var(--box-icon-size); height: var(--box-icon-size); -moz-context-properties: fill, stroke; fill: var(--box-icon-fill); stroke: var(--box-icon-stroke); } .description { grid-area: description; display: flex; justify-content: center; gap: var(--space-small); } } .button { box-sizing: border-box; width: 100%; align-items: center; justify-content: space-between; font-family: inherit; font-size: inherit; appearance: none; background-color: var(--button-background-color-ghost); color: var(--button-text-color-ghost); display: flex; padding: var(--box-padding); text-align: start; border: none; border-start-start-radius: var(--box-border-radius-start, var(--box-border-radius-inner)); border-start-end-radius: var(--box-border-radius-start, var(--box-border-radius-inner)); border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius-inner)); border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius-inner)); &:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } &:hover { background-color: var(--button-background-color-ghost-hover); color: var(--button-text-color-ghost-hover); } &:hover:active:not(:disabled) { background-color: var(--button-background-color-ghost-active); color: var(--button-text-color-ghost-active); } &:disabled { background-color: var(--button-background-color-ghost-disabled); color: var(--button-text-color-ghost-disabled); opacity: var(--button-opacity-disabled); } } .nav-icon:dir(rtl) { scale: -1 1; }