/*******************************
 * 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
 ******************************/
.gallery-image {
  cursor: pointer;
  box-sizing: border-box;
  align-self: center;
}

.wpce-gallery,
.gallery-overlay {
  --theme: dark;
  --image-index: 0;
  --thumbnail-size: /* grow(60, 100, $to: 3xl) */ clamp(3.75rem, 3.1494778068rem + 2.6109660574vw, 6.25rem);
  --thumbnail-margin-y: /* grow(15, 30) */ clamp(0.9375rem, 0.6031976744rem + 1.4534883721vw, 1.875rem);
  --thumbnail-margin-x: 25px;
  --thumbnail-gap: /* grow(10, 20) */ clamp(0.625rem, 0.4021317829rem + 0.9689922481vw, 1.25rem);
  --thumbnail-container-height: calc(var(--thumbnail-size) + 2 * var(--thumbnail-margin-y));
  --control-size: 3rem;
  --control-offset: 1rem;
  --image-offset-top: calc(var(--control-offset) + var(--control-size) + var(--thumbnail-margin-y));
  --image-container-height: calc(
    100vh - var(--thumbnail-container-height) - var(--admin-bar-height, 0px) - var(
        --image-offset-top
      )
  );
  --image-padding-y: /* grow(20, 30) */ clamp(1.25rem, 1.0271317829rem + 0.9689922481vw, 1.875rem);
  --image-padding-x: /* grow(20, 30) */ clamp(1.25rem, 1.0271317829rem + 0.9689922481vw, 1.875rem);
  --focus-color: var(--white);
}
@media (width >= 768px /* sm */) {
  .wpce-gallery,
  .gallery-overlay {
    --image-offset-top: 0px;
    --image-padding-x: calc(/* grow(20, 30) */ clamp(1.25rem, 1.0271317829rem + 0.9689922481vw, 1.875rem) + var(--control-size) + var(--control-offset));
  }
}
.wpce-gallery,
.gallery-overlay {
  margin-bottom: 1px;
  background-color: #fff;
}
.wpce-gallery img,
.gallery-overlay img {
  border-radius: var(--rounded);
}
.wpce-gallery .gallery-group-description p,
.gallery-overlay .gallery-group-description p {
  margin-top: 0;
}
.wpce-gallery .content,
.gallery-overlay .content {
  display: none;
}
.wpce-gallery.active,
.gallery-overlay.active {
  margin-left: 0px;
  margin-right: 0px;
}
.wpce-gallery.active .content,
.gallery-overlay.active .content {
  display: flex;
}

.gallery-thumbnails {
  display: flex;
  gap: var(--thumbnail-gap);
  padding: var(--thumbnail-margin-y) var(--thumbnail-margin-x);
  overflow: hidden;
  justify-content: flex-start;
  margin-left: calc(-2 * var(--image-index) * (var(--thumbnail-gap) + var(--thumbnail-size)) - 2 * var(--thumbnail-margin-x));
  transform: translateX(50%) translateX(calc(-0.5 * var(--thumbnail-size)));
  transition-duration: 200ms;
  transition-property: margin-left, transform;
}
@supports (overflow: clip) {
  .gallery-thumbnails {
    overflow: clip;
  }
}
.gallery-thumbnails .gallery-image-link {
  --color: transparent;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: var(--color);
  outline: /* grow(2, 4) */ clamp(0.125rem, 0.0804263566rem + 0.1937984496vw, 0.25rem) solid var(--color);
  transition-duration: 200ms;
  transition-property: outline-color background-color;
  box-shadow: 0 1px min(var(--thumbnail-margin-x), var(--thumbnail-margin-y)) rgba(0, 0, 0, 0.2);
}
.gallery-thumbnails .gallery-image-link[data-current] {
  --color: var(--primary-color);
}
.gallery-thumbnails .gallery-image-link:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.gallery-thumbnails .gallery-image {
  width: var(--thumbnail-size);
  height: var(--thumbnail-size);
}

.gallery-control {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  word-spacing: inherit;
  white-space: nowrap;
  background: none;
  color: inherit;
  text-align: left;
  --button-background: var(--primary-color);
  --button-color: var(--primary-contrast, var(--text-color-inverted));
  --button-border-color: var(--button-background);
  --button-hover-background: var(--primary-color-darker);
  --button-hover-color: var(--button-color);
  --button-hover-border-color: var(--button-hover-background);
  --button-active-background: var(--primary-color-darker-2);
  --button-active-color: var(--button-color);
  --button-active-border-color: var(--button-active-background);
}
@container style(--theme: dark) {
  .gallery-control {
    --button-background: var(--white);
    --button-color: var(--primary-color);
    --button-hover-background: var(--primary-100);
    --button-active-background: var(--primary-200);
    --button-active-color: var(--primary-800);
  }
}
.gallery-control {
  ---background: var(--button-background);
  ---color: var(--button-color);
  ---border-color: var(--button-border-color);
  border: 1px solid var(---border-color);
  background-color: var(---background);
  color: var(---color);
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9375rem;
  line-height: 1.333;
  letter-spacing: -0.005em;
  border-radius: var(--rounded);
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.gallery-control:focus:not(:focus-visible) {
  outline: none;
}
.gallery-control:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
@media (hover: hover) and (pointer: fine) {
  .gallery-control:where(:not(:disabled):not(.disabled):not([aria-disabled=true]):not(.inert):not([inert]):not(.inert *):not([inert] *)):hover {
    ---background: var(--button-hover-background);
    ---color: var(--button-hover-color);
    ---border-color: var(--button-hover-border-color);
  }
}
.gallery-control:where(:not(:disabled):not(.disabled):not([aria-disabled=true]):not(.inert):not([inert]):not(.inert *):not([inert] *)):active {
  ---background: var(--button-active-background);
  ---color: var(--button-active-color);
  ---border-color: var(--button-active-border-color);
}
.gallery-control:where(:disabled, .disabled, [aria-disabled=true], .inert, [inert], .inert *, [inert] *) {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}
.gallery-control {
  --overlay-translate: 0%;
  --overlay-color: var(--button-hover-background);
  --overlay-duration: 200ms;
  overflow: hidden;
  position: relative;
  z-index: 0;
  padding: 1rem 1.5rem;
  line-height: 1.25;
  background-color: var(--button-background);
  border: none;
}
.gallery-control::selection {
  background-color: rgba(255, 255, 255, 0.9)  !important;
  color: oklch(from var(--primary-color) calc(l * 0.9) c h)  !important;
}
.gallery-control::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition-property: transform, background-color;
  transition-duration: 300ms;
  transform: translate(var(--overlay-translate));
  background-color: var(--overlay-color);
  pointer-events: none;
  z-index: -1;
}
@container style(--theme: dark) {
  .gallery-control::selection {
    background-color: oklch(from var(--primary-color) calc(l * 0.9) calc(c * 1.5) h)  !important;
    color: white  !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .gallery-control:where(:not(:disabled):not(.disabled):not([aria-disabled=true]):not(.inert):not([inert]):not(.inert *):not([inert] *)):hover {
    --overlay-translate: 100%;
  }
}
.gallery-control:where(:not(:disabled):not(.disabled):not([aria-disabled=true]):not(.inert):not([inert]):not(.inert *):not([inert] *)):active {
  --overlay-translate: 100%;
  --overlay-color: var(--button-active-background);
}
.gallery-control {
  padding: 1rem;
  border-radius: 100vmax;
  width: 0.75rem;
  height: 0.75rem;
  box-sizing: content-box;
  justify-content: center;
  position: absolute;
  z-index: 10;
}
.gallery-control:focus:not(:focus-visible) {
  outline: none;
}
.gallery-control:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.gallery-control:disabled {
  filter: grayscale(100%);
  cursor: default;
}
.gallery-control:not(:disabled):hover {
  --border-color: var(--white);
}
.gallery-control:not(:disabled):active {
  opacity: 0.6;
}
.gallery-control svg {
  width: 1.25rem;
  height: 1.25rem;
}
.gallery-control.control-prev, .gallery-control.control-next {
  top: var(--control-offset);
}
@media (width >= 768px /* sm */) {
  .gallery-control.control-prev, .gallery-control.control-next {
    top: calc(var(--image-container-height) / 2);
    transform: translateY(-50%);
  }
}
.gallery-control.control-next {
  right: auto;
  left: 4.75rem;
}
@media (width >= 768px /* sm */) {
  .gallery-control.control-next {
    left: auto;
    right: var(--control-offset);
  }
}
.gallery-control.control-prev {
  left: 1rem;
}
.gallery-control.control-close {
  right: 1rem;
  top: 1rem;
}

.control-caption {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background-color: #fff;
  padding: 8px 30px;
  border-radius: 100px;
}
.control-caption.active {
  display: block;
}

.gallery-overlay {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  position: fixed;
  z-index: 100;
  left: 0;
  top: var(--admin-bar-height, 0);
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--admin-bar-height));
  user-select: none;
  background-color: rgba(19, 25, 35, 0.9);
}
@supports (backdrop-filter: blur(10px)) {
  .gallery-overlay {
    backdrop-filter: blur(20px);
    background-color: rgba(19, 25, 35, 0.75);
  }
}
.gallery-overlay .content {
  text-align: center;
  width: 100%;
  flex-shrink: 1;
  min-width: 100px;
  min-height: 100px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-image: url(/wp-content/themes/rattin.ch/dist/78a8a1ea972a14d7.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.875rem 2.875rem;
}
@media (width < 768px /* sm */) {
  .gallery-overlay .content {
    padding-top: var(--image-offset-top);
  }
}
.gallery-overlay .content img,
.gallery-overlay .content .gallery-image {
  animation: gallery-image-reveal linear 0.3s;
  max-height: calc(var(--image-container-height) - 2 * var(--image-padding-y));
  max-width: calc(100% - 2 * var(--image-padding-x));
  width: auto;
  height: auto;
  flex-shrink: 0;
  flex-grow: 0;
  transition: opacity 200ms;
  box-shadow: 0 1px /* grow(20, 40) */ clamp(1.25rem, 0.8042635659rem + 1.9379844961vw, 2.5rem) rgba(0, 0, 0, 0.4);
}

.gallery .gallery-image {
  transition: all ease 200ms;
}
.gallery .gallery-image:hover {
  scale: 1.05;
}