/*!******************************************************!*\
  !*** ../src/elements/kitchen-sink/kitchen-sink.scss ***!
  \******************************************************/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.ks-1 {
  display: flex;
  align-items: first baseline;
  gap: max(1rem, 5vmin);
  max-width: calc(100vw - 2 * var(--container-padding));
  margin-inline: auto;
  margin-block: max(2rem, 8vmin);
  font-family: var(--accent-font-family);
  font-size: calc(1.5rem + 2.5vw);
  font-weight: 550;
  line-height: 1;
  text-align: center;
  counter-increment: ks-1;
  counter-reset: ks-2;
}

.ks-1::before,
.ks-1::after {
  content: "";
  width: 1rem;
  height: 4px;
  position: relative;
  top: -0.5ex;
  transform: translateY(-50%);
  background: var(--primary-color);
  flex-grow: 1;
  flex-shrink: 0;
}

.ks-1 span::before {
  content: counter(ks-1);
  padding-right: 0.5ch;
}

.ks-2 {
  display: flex;
  align-items: first baseline;
  gap: max(1rem, 4vmin);
  max-width: calc(100vw - 2 * var(--container-padding));
  margin-inline: auto;
  margin-block: max(1.75rem, 6vmin);
  font-family: var(--accent-font-family);
  font-size: calc(1.5rem + 1.5vw);
  font-weight: 550;
  line-height: 1;
  text-align: center;
  counter-increment: ks-2;
}

.ks-2::before,
.ks-2::after {
  content: "";
  width: 1rem;
  height: 4px;
  position: relative;
  top: -0.5ex;
  transform: translateY(-50%);
  border-bottom: 4px dotted var(--primary-color);
  flex-grow: 1;
  flex-shrink: 0;
}

.ks-2 span::before {
  content: counter(ks-1) "." counter(ks-2);
  padding-right: 0.5ch;
}

.page-section.style-default + :is(.ks-1, .ks-2) {
  margin-top: 0;
}

:is(.ks-1, .ks-2):has(+ .page-section.style-default, + link + .page-section.style-default) {
  margin-bottom: 0;
}

/*# sourceMappingURL=css-wpce--kitchen-sink.css.map*/