/* compiled by scssphp 1.6.0 on Wed, 29 Oct 2025 12:00:30 +0000 (0.0697s) */

:root {
  --button__transition: 0.2s ease-in-out;
  --button__border-width: 0.0625rem;
  --button__border-style: solid;
  --button__border-color: var( --color-2 );
  --button__border-radius: 0;
  --button__line-height: 1.5;
  --button__padding-block: 0.75rem;
  --button__padding-inline: 1.875rem;
  --button__font-family: var(--font-family--heading);
  --button__font-size: 0.9375rem;
  --button__font-weight: var(--font-weight--bold);
  --button__box-shadow: none;
  --button__gap: 0.75rem;
  --button__background--primary: var(--color-2);
  --button__border-color--primary: var( --color-2 );
  --button__color--primary: var( --color-white );
  --button__background--primary--hover: var(--color-2--hover);
  --button__border-color--primary--hover: var( --color-2--hover );
  --button__color--primary--hover: var( --color-white );
  --button__background--secondary: var( --color-white );
  --button__border-color--secondary: var( --color-white );
  --button__color--secondary: var( --color-grey-1 );
  --button__background--secondary--hover: transparent;
  --button__border-color--secondary--hover: var( --color-white );
  --button__color--secondary--hover: var( --color-white );
}
.button {
  transition: 0.2s ease-in-out;
  overflow: clip;
  position: relative;
  width: 100%;
  text-transform: uppercase;
}
@media (min-width: 36rem) {
  .button {
    width: auto;
  }
}
.button:has(.icon.--arrow-right) {
  gap: 0;
}
.button:has(.icon.--arrow-right) .icon.--arrow-right {
  width: 0.875rem;
  min-width: 0.875rem;
  height: 1rem;
  opacity: 0;
  visibility: hidden;
  margin-inline-start: -0.875rem;
}
.button:has(.icon.--arrow-right):hover .icon.--arrow-right, .button:has(.icon.--arrow-right):focus-visible .icon.--arrow-right {
  opacity: 1;
  visibility: visible;
  margin-inline-start: 0.75rem;
}
.button__group {
  --button-group__vertical-alignment: flex-start;
  --button-group__horizontal-alignment: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
@media (min-width: 36rem) {
  .button__group {
    width: auto;
  }
}
.button__title {
  white-space: nowrap;
  z-index: 3;
  transition: 0.2s ease-in-out;
}
.button svg {
  position: relative;
  z-index: 3;
  transition: 0.2s ease-in-out;
}
.button.--bordered {
  border: var(--button__border-style) var(--button__border-width) var(--button__border-color);
  padding: var(--button__padding-block) var(--button__padding-inline);
  border-radius: var(--button__border-radius);
  background-color: transparent;
  color: var(--color-2);
  font-family: var(--button__font-family);
  font-size: var(--button__font-size);
  line-height: var(--button__line-height);
  font-weight: var(--button__font-weight);
}
.button.--bordered svg, .button.--bordered svg path {
  fill: var(--color-2);
}
.button.--bordered:hover, .button.--bordered:focus-visible {
  background: none;
  border-color: var(--color-2--hover);
  color: var(--color-2--hover);
}
.button.--bordered:hover svg, .button.--bordered:hover svg path, .button.--bordered:focus-visible svg, .button.--bordered:focus-visible svg path {
  fill: var(--color-2--hover);
}
.button.--icon-only {
  border: 0 none;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-2);
}
.button.--icon-only svg, .button.--icon-only svg path {
  fill: var(--color-2);
}
.button.--icon-only:hover, .button.--icon-only:focus-visible {
  background-color: transparent;
  color: var(--color-2);
}
.button.--icon-only:hover svg, .button.--icon-only:hover svg path, .button.--icon-only:focus-visible svg, .button.--icon-only:focus-visible svg path {
  fill: var(--color-2);
}
.button.--icon-only:has(.icon.--arrow-right) .icon.--arrow-right {
  opacity: 1;
  visibility: visible;
  margin-inline-start: 0;
}
.button.--icon-only:has(.icon.--arrow-right):hover .icon.--arrow-right, .button.--icon-only:has(.icon.--arrow-right):focus-visible .icon.--arrow-right {
  opacity: 1;
  visibility: visible;
  margin-inline-start: 0;
}
.button.--search-icon {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-white);
  gap: 0.75rem;
  padding: var(--button__padding-block) var(--button__padding-inline);
  border-radius: var(--button__border-radius);
  font-family: var(--button__font-family);
  font-size: var(--button__font-size);
  line-height: var(--button__line-height);
  font-weight: var(--button__font-weight);
}
.button.--search-icon svg, .button.--search-icon svg path {
  fill: var(--color-white);
}
.button.--search-icon:hover, .button.--search-icon:focus-visible {
  background: var(--color-2--hover);
  border-color: var(--color-2--hover);
  color: var(--color-white);
}
.button.--search-icon:hover svg, .button.--search-icon:hover svg path, .button.--search-icon:focus-visible svg, .button.--search-icon:focus-visible svg path {
  fill: var(--color-white);
}
.button.--search-icon:has(.icon.--arrow-right) {
  gap: 0.75rem;
}
.button.--search-icon:has(.icon.--arrow-right) .icon.--arrow-right {
  display: none;
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22home%2Flangman%2Fdomains%2Flangman.draad.dev%2Fpublic_html%2Fwp-content%2Fthemes%2Flangman%2Fsass%2Fcomponents%2Fbuttons.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAkCA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAGI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAWI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQX%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMO%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKP%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMG%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAWI%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMI%3BAAAA%3BAAAA%3BAAOR%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOI%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAKI%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASZ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYI%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMI%3BAAAA%3BAAAA%3BAAMJ%3BAAAA%3BAAAA%3BAAGI%3BAAAA%3BAAAA%22%7D */