/*! knopf v1.0.9 | MIT License | https://knopf.dev/ */

:root {
  /* ==========================================================================
     Color
     ========================================================================== */

  --knopf-hue: 218;
  --knopf-saturation: 77%;
  --knopf-luminosity: 37%;

  /* ==========================================================================
     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: 33%;

  /* 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-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);
  --knopf-hover-color: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);
  --knopf-active-color: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);

  /* Default */
  --knopf-background-color: hsl(var(--knopf-color));
  --knopf-border-color: transparent;
  --knopf-text-color: white;

  /* Hover */
  --knopf-hover-background-color: hsl(var(--knopf-hover-color));
  --knopf-hover-border-color: transparent;
  --knopf-hover-text-color: white;

  /* Active */
  --knopf-active-background-color: hsl(var(--knopf-active-color));
  --knopf-active-border-color: transparent;
  --knopf-active-text-color: white;

  /* Spacing */
  --knopf-block-padding: var(--knopf-padding);
  --knopf-inline-padding: calc(var(--knopf-padding) * 2);

  /* Properties */
  all: unset;
  align-items: center;
  background-color: var(--knopf-background-color);
  border-color: var(--knopf-border-color);
  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: var(--knopf-text-color);
  -webkit-text-fill-color: 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);
  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);
  white-space: nowrap;
}

/* ==========================================================================
   Types
   ========================================================================== */

.knopf.inverse {
  /* base */
  --knopf-background-color: transparent;
  --knopf-text-color: hsl(var(--knopf-color));

  /* hover */
  --knopf-hover-background-color: hsl(var(--knopf-color));
  --knopf-hover-text-color: white;

  /* active */
  --knopf-active-background-color: hsl(var(--knopf-hover-color));
  --knopf-active-text-color: white;
}

.knopf.flat {
  /* base */
  --knopf-background-color: transparent;
  --knopf-text-color: hsl(var(--knopf-color));

  /* hover */
  --knopf-hover-background-color: hsl(var(--knopf-color) / 15%);
  --knopf-hover-text-color: hsl(var(--knopf-hover-color));

  /* active */
  --knopf-active-background-color: hsl(var(--knopf-color) / 25%);
  --knopf-active-text-color: hsl(var(--knopf-active-color));
}

.knopf.pale {
  /* base */
  --knopf-background-color: hsl(var(--knopf-color) / 10%);
  --knopf-text-color: hsl(var(--knopf-color));

  /* hover */
  --knopf-hover-background-color: hsl(var(--knopf-color) / 20%);
  --knopf-hover-text-color: hsl(var(--knopf-hover-color));

  /* active */
  --knopf-active-background-color: hsl(var(--knopf-color) / 30%);
  --knopf-active-text-color: hsl(var(--knopf-active-color));
}

/* ==========================================================================
   States
   ========================================================================== */

/* Disabled */
.knopf.knopf:disabled,
.knopf.disabled {
  cursor: default;
  opacity: 40%;
  pointer-events: none;
}

/* Visited */
.knopf.knopf:visited {
  color: var(--knopf-text-color);
}

/* Hover */
.knopf.knopf:hover,
.knopf.knopf:active {
  --knopf-background-color: var(--knopf-hover-background-color);
  --knopf-border-color: var(--knopf-hover-border-color);
  --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: 0 0 0 0.15em hsl(var(--knopf-color) / 40%);

  outline: none;
}

/* Active */
.knopf.active {
  --knopf-background-color: var(--knopf-active-background-color);
  --knopf-border-color: var(--knopf-active-border-color);
  --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: hsl(var(--knopf-color) / var(--knopf-border-alpha));
  --knopf-hover-border-color: hsl(var(--knopf-color) / var(--knopf-border-alpha));
  --knopf-active-border-color: hsl(var(--knopf-color) / var(--knopf-border-alpha));
}

.knopf.outlined {
  --knopf-border-alpha: 1;
}

/* ==========================================================================
   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.link {
  --knopf-border-width: 0;
  --knopf-border-radius: 0;
  --knopf-font-size: 1em;
  --knopf-padding: 0;

  /* Text decoration */
  --knopf-text-decoration-line: underline;
  --knopf-text-decoration-color: hsl(var(--knopf-color) / 40%);
  --knopf-hover-text-decoration-color: hsl(var(--knopf-hover-color));
  --knopf-active-text-decoration-color: hsl(var(--knopf-active-color));

  /* base */
  --knopf-background-color: transparent;
  --knopf-border-color: transparent;
  --knopf-text-color: hsl(var(--knopf-color));

  /* hover */
  --knopf-hover-background-color: transparent;
  --knopf-hover-border-color: transparent;
  --knopf-hover-text-color: hsl(var(--knopf-hover-color));

  /* active */
  --knopf-active-background-color: transparent;
  --knopf-active-border-color: transparent;
  --knopf-active-text-color: hsl(var(--knopf-active-color));
}

/* ==========================================================================
   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);
}