@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
59 lines (51 loc) • 2.26 kB
CSS
@import './base-button.css';
/***************************************************************************************************
* *
* SIZES *
* *
***************************************************************************************************/
.rt-IconButton {
&:where(:not(.rt-variant-ghost)) {
height: var(--base-button-height);
width: var(--base-button-height);
}
&:where(.rt-variant-ghost) {
padding: var(--icon-button-ghost-padding);
/* We reset the defined margin variables to avoid inheriting them from a higher component */
/* If a margin IS defined on the component itself, the utility class will win and reset it */
--margin-top: 0px;
--margin-right: 0px;
--margin-bottom: 0px;
--margin-left: 0px;
/* Define the overrides to incorporate the negative margins */
--margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
--margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
--margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
--margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
/* Reset the overrides on direct children */
:where(&) > * {
--margin-top-override: initial;
--margin-right-override: initial;
--margin-bottom-override: initial;
--margin-left-override: initial;
}
margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
var(--margin-left-override);
}
}
@breakpoints {
.rt-IconButton:where(.rt-variant-ghost) {
&:where(.rt-r-size-1) {
--icon-button-ghost-padding: var(--space-1);
}
&:where(.rt-r-size-2) {
--icon-button-ghost-padding: calc(var(--space-1) * 1.5);
}
&:where(.rt-r-size-3) {
--icon-button-ghost-padding: var(--space-2);
}
&:where(.rt-r-size-4) {
--icon-button-ghost-padding: var(--space-3);
}
}
}