html {
/* ==========================================================================
Color
========================================================================== */
--knopf-hue: 218;
--knopf-saturation: 77%;
--knopf-luminosity: 37%;
/* White */
--knopf-white: 0 100% 100%;
/* ==========================================================================
Sizes
========================================================================== */
/* Font */
--knopf-font-size-base: 1rem;
--knopf-font-size-small: calc(var(--knopf-font-size-base) - 0.25rem);
--knopf-font-size-large: calc(var(--knopf-font-size-base) + 0.2rem);
--knopf-font-size-huge: calc(var(--knopf-font-size-base) + 0.5rem);
/* Padding */
--knopf-padding-base: 0.375rem;
--knopf-padding-small: calc(var(--knopf-padding-base) - 0.125rem);
--knopf-padding-large: calc(var(--knopf-padding-base) + 0.125rem);
--knopf-padding-huge: calc(var(--knopf-padding-base) + 0.375rem);
/* Icon */
--knopf-icon-size-base: 1.125rem;
--knopf-icon-size-small: calc(var(--knopf-icon-size-base) - 0.25rem);
--knopf-icon-size-large: calc(var(--knopf-icon-size-base) + 0.375rem);
--knopf-icon-size-huge: calc(var(--knopf-icon-size-base) + 0.625rem);
/* ==========================================================================
Initial
========================================================================== */
/* Size */
--knopf-font-size: var(--knopf-font-size-base);
--knopf-padding: var(--knopf-padding-base);
--knopf-icon-size: var(--knopf-icon-size-base);
/* Border */
--knopf-border-radius: 0.33em;
--knopf-border-style: solid;
--knopf-border-width: 1px;
--knopf-border-alpha: 0%;
/* Text */
--knopf-font-family: inherit;
--knopf-font-weight: 500;
--knopf-line-height: 1.5;
--knopf-justify-content: center;
--knopf-text-decoration-line: none;
--knopf-text-decoration-color: currentColor;
--knopf-text-transform: none;
/* Flex */
--knopf-display: inline-flex;
--knopf-flex-direction: row;
/* Group */
--knopf-group-direction: row;
/* Misc */
--knopf-background-image: none;
--knopf-box-shadow: none;
--knopf-transition: all 150ms ease-in-out;
}
/* ==========================================================================
Class
========================================================================== */
.knopf.knopf {
/* Colors */
--knopf-color: var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);
/* Light */
--knopf-color-light: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);
--knopf-color-lighter: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);
/* Dark */
--knopf-color-dark: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);
--knopf-color-darker: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);
/* Default */
--knopf-background-alpha: 100%;
--knopf-background-color: var(--knopf-color);
--knopf-border-color: var(--knopf-color);
--knopf-gradient-from: var(--knopf-color-light);
--knopf-gradient-to: var(--knopf-color-dark);
--knopf-text-color: var(--knopf-white);
/* Hover */
--knopf-hover-background-alpha: 100%;
--knopf-hover-background-color: var(--knopf-color-dark);
--knopf-hover-border-color: var(--knopf-color-dark);
--knopf-hover-gradient-from: var(--knopf-color-lighter);
--knopf-hover-gradient-to: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-white);
/* Active */
--knopf-active-background-alpha: 100%;
--knopf-active-background-color: var(--knopf-color-darker);
--knopf-active-border-color: var(--knopf-color-darker);
--knopf-active-gradient-from: var(--knopf-color-dark);
--knopf-active-gradient-to: var(--knopf-color);
--knopf-active-text-color: var(--knopf-white);
/* Spacing */
--knopf-block-padding: var(--knopf-padding);
--knopf-inline-padding: calc(var(--knopf-padding) * 2);
/* Misc */
--knopf-focus-ring: 0 0 0 0.15em hsl(var(--knopf-color) / 40%);
/* Properties */
all: unset;
-webkit-user-drag: element;
align-items: center;
background-color: var(--knopf-named-background-color, hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));
background-image: var(--knopf-background-image);
background-origin: border-box;
border-color: hsl(var(--knopf-border-color) / var(--knopf-border-alpha));
border-radius: var(--knopf-border-radius);
border-style: var(--knopf-border-style);
border-width: var(--knopf-border-width);
box-shadow: var(--knopf-box-shadow);
box-sizing: border-box;
color: hsl(var(--knopf-text-color));
-webkit-text-fill-color: hsl(var(--knopf-text-color));
cursor: pointer;
display: var(--knopf-display);
flex-direction: var(--knopf-flex-direction);
font-family: var(--knopf-font-family);
font-size: var(--knopf-font-size, inherit);
font-weight: var(--knopf-font-weight);
line-height: var(--knopf-line-height);
justify-content: var(--knopf-justify-content);
padding-block-end: var(--knopf-block-padding);
padding-block-start: var(--knopf-block-padding);
padding-inline-end: var(--knopf-inline-padding);
padding-inline-start: var(--knopf-inline-padding);
position: relative;
text-decoration-color: var(--knopf-text-decoration-color);
text-decoration-line: var(--knopf-text-decoration-line);
text-transform: var(--knopf-text-transform);
transition: var(--knopf-transition);
}
/* ==========================================================================
Types
========================================================================== */
.knopf.inverse {
/* base */
--knopf-background-alpha: 0%;
--knopf-text-color: var(--knopf-color);
/* hover */
--knopf-hover-background-alpha: 100%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-white);
/* active */
--knopf-hover-background-alpha: 100%;
--knopf-active-background-color: var(--knopf-color-dark);
--knopf-active-text-color: var(--knopf-white);
}
.knopf.flat {
/* base */
--knopf-background-alpha: 0;
--knopf-text-color: var(--knopf-color);
/* hover */
--knopf-hover-background-alpha: 15%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-color-dark);
/* active */
--knopf-active-background-alpha: 25%;
--knopf-active-background-color: var(--knopf-color);
--knopf-active-text-color: var(--knopf-color-darker);
}
.knopf.pale {
/* base */
--knopf-background-alpha: 10%;
--knopf-background-color: var(--knopf-color);
--knopf-text-color: var(--knopf-color);
/* hover */
--knopf-hover-background-alpha: 20%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-color-dark);
/* active */
--knopf-active-background-alpha: 30%;
--knopf-active-background-color: var(--knopf-color);
--knopf-active-text-color: var(--knopf-color-darker);
}
/* ==========================================================================
States
========================================================================== */
/* Disabled */
.knopf.knopf:disabled,
.knopf.disabled {
cursor: default;
opacity: 40%;
pointer-events: none;
}
/* Visited */
.knopf.knopf:visited {
color: hsl(var(--knopf-text-color));
}
/* Hover */
.knopf.knopf:hover,
.knopf.knopf:active {
--knopf-background-alpha: var(--knopf-hover-background-alpha);
--knopf-background-color: var(--knopf-hover-background-color);
--knopf-border-color: var(--knopf-hover-border-color);
--knopf-gradient-from: var(--knopf-hover-gradient-from);
--knopf-gradient-to: var(--knopf-hover-gradient-to);
--knopf-text-color: var(--knopf-hover-text-color);
--knopf-text-decoration-color: var(--knopf-hover-text-decoration-color);
}
/* Focus */
.knopf.knopf:focus,
.knopf.knopf:focus-within {
--knopf-box-shadow: var(--knopf-focus-ring);
outline: none;
}
/* Active */
.knopf.active {
--knopf-background-alpha: var(--knopf-active-background-alpha);
--knopf-background-color: var(--knopf-active-background-color);
--knopf-border-color: var(--knopf-active-border-color);
--knopf-gradient-from: var(--knopf-active-gradient-from);
--knopf-gradient-to: var(--knopf-active-gradient-to);
--knopf-text-color: var(--knopf-active-text-color);
--knopf-text-decoration-color: var(--knopf-active-text-decoration-color);
}
/* ==========================================================================
Sizes
========================================================================== */
.knopf.small {
--knopf-font-size: var(--knopf-font-size-small);
--knopf-padding: var(--knopf-padding-small);
--knopf-icon-size: var(--knopf-icon-size-small);
}
.knopf.large {
--knopf-font-size: var(--knopf-font-size-large);
--knopf-padding: var(--knopf-padding-large);
--knopf-icon-size: var(--knopf-icon-size-large);
}
.knopf.huge {
--knopf-font-size: var(--knopf-font-size-huge);
--knopf-padding: var(--knopf-padding-huge);
--knopf-icon-size: var(--knopf-icon-size-huge);
}
/* ==========================================================================
Modifiers
========================================================================== */
.knopf.traced,
.knopf.outlined {
--knopf-border-color: var(--knopf-color);
}
.knopf.traced {
--knopf-border-alpha: 33%;
}
.knopf.outlined {
--knopf-border-alpha: 100%;
}
/* ==========================================================================
Alignment
========================================================================== */
.knopf.block {
--knopf-display: flex;
width: 100%;
}
.knopf.start {
--knopf-justify-content: flex-start;
}
.knopf.center {
--knopf-justify-content: center;
}
.knopf.end {
--knopf-justify-content: flex-end;
}
/* ==========================================================================
Spacing
========================================================================== */
.knopf.even {
--knopf-inline-padding: var(--knopf-padding);
}
.knopf.wide {
--knopf-inline-padding: calc(var(--knopf-padding) * 3);
}
/* ==========================================================================
Corners
========================================================================== */
.knopf.pill {
--knopf-border-radius: 9999px;
}
.knopf.sharp {
--knopf-border-radius: 0;
}
/* ==========================================================================
Other
========================================================================== */
.knopf.gradient {
--knopf-named-background-color: transparent;
--knopf-background-image: linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)), hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)));
}
.knopf.link {
--knopf-border-width: 0;
--knopf-border-radius: 0;
--knopf-padding: 0;
--knopf-font-size: null;
/* Text decoration */
--knopf-text-decoration-line: underline;
--knopf-text-decoration-color: hsl(var(--knopf-color) / 40%);
--knopf-hover-text-decoration-color: hsl(var(--knopf-color-dark));
--knopf-active-text-decoration-color: hsl(var(--knopf-color-darker));
/* base */
--knopf-background-alpha: 0;
--knopf-border-alpha: 0;
--knopf-text-color: var(--knopf-color);
/* hover */
--knopf-hover-background-alpha: 0;
--knopf-hover-border-alpha: 0;
--knopf-hover-text-color: var(--knopf-color-dark);
/* active */
--knopf-active-background-alpha: 0;
--knopf-active-border-alpha: 0;
--knopf-active-text-color: var(--knopf-color-darker);
}
/* ==========================================================================
Icon
========================================================================== */
.knopf > .icon {
align-items: center;
color: inherit;
display: inline-flex;
fill: currentColor;
flex-shrink: 0;
font-size: var(--knopf-icon-size);
height: var(--knopf-icon-size);
justify-content: center;
width: var(--knopf-icon-size);
}
.knopf > .icon.small {
--knopf-icon-size: var(--knopf-icon-size-small);
}
.knopf > .icon.base {
--knopf-icon-size: var(--knopf-icon-size-base);
}
.knopf > .icon.large {
--knopf-icon-size: var(--knopf-icon-size-large);
}
.knopf > .icon.huge {
--knopf-icon-size: var(--knopf-icon-size-huge);
}
.knopf > .icon:first-child:not(:only-child) {
margin-inline-start: calc(var(--knopf-inline-padding) * -0.25);
margin-inline-end: calc(var(--knopf-inline-padding) * 0.5);
}
.knopf > .icon:last-child:not(:only-child) {
margin-inline-start: calc(var(--knopf-inline-padding) * 0.5);
margin-inline-end: calc(var(--knopf-inline-padding) * -0.25);
}
/* Prevent floating icons on small screens */
@media screen and (min-width: 576px) {
.knopf > .icon.floating:not(:only-child) {
margin-inline-start: 0;
margin-inline-end: 0;
position: absolute;
}
.knopf > .icon.floating:first-child:not(:only-child) {
left: var(--knopf-inline-padding);
}
.knopf > .icon.floating:last-child:not(:only-child) {
right: var(--knopf-inline-padding);
}
}
/* ==========================================================================
Groups
========================================================================== */
.knopf-group {
align-items: stretch;
display: inline-flex;
flex-direction: var(--knopf-group-direction);
flex-wrap: nowrap;
justify-content: center;
}
.knopf-group.vertical {
--knopf-group-direction: column;
}
.knopf-group.vertical > .knopf:first-child:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.knopf-group.vertical > .knopf:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.knopf-group:not(.vertical) > .knopf:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.knopf-group:not(.vertical) > .knopf:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.knopf-group > .knopf:not(:first-child):not(:last-child) {
--knopf-border-radius: 0;
}
.knopf-group.vertical > .knopf + .knopf {
margin-block-start: calc(var(--knopf-border-width) * -1);
}
.knopf-group:not(.vertical) > .knopf + .knopf {
margin-inline-start: calc(var(--knopf-border-width) * -1);
}