button svg {
  pointer-events: none;
}

.btn {
  display: grid;
  grid-auto-flow: column;
  column-gap: 8px;
  place-items: center;
  justify-content: center;
  font-family: Ubuntu, sans-serif;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  border-radius: 10px;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
}
@media (min-width: 740px) {
  .btn {
    padding: 16px 44px;
    font-size: 16px;
  }
}
@media (max-width: 739.98px) {
  .btn {
    padding: 10px 24px;
    font-size: 14px;
  }
  .btn svg {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 740px) {
  .btn.btn--iconLeft {
    padding-inline-start: 36px;
  }
}
@media (max-width: 739.98px) {
  .btn.btn--iconLeft {
    padding-inline-start: 16px;
  }
}
@media (min-width: 740px) {
  .btn.btn--iconRight {
    padding-inline-end: 36px;
  }
}
@media (max-width: 739.98px) {
  .btn.btn--iconRight {
    padding-inline-end: 16px;
  }
}
@media (hover: hover) {
  .btn--sm:hover, .btn--sm:focus-visible {
    background-color: var(--_bg-hover);
  }
}
@media (hover: none) {
  .btn--sm:active {
    background-color: var(--_bg-hover);
  }
}
@media (min-width: 740px) {
  .btn--sm {
    padding: 10px 24px;
    font-size: 14px;
  }
  .btn--sm svg {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 740px) {
  .btn--sm.btn--iconLeft {
    padding-inline-start: 16px;
  }
}
@media (min-width: 740px) {
  .btn--sm.btn--iconRight {
    padding-inline-end: 16px;
  }
}
.btn--primary {
  --_bg-hover: var(--red-300);
  color: var(--white);
  background-color: var(--red-400);
}
.btn--secondary {
  --_bg-hover: var(--yellow-300);
  color: var(--black);
  background-color: var(--yellow-400);
}
.btn--tertiary {
  --_bg-hover: var(--accent);
  color: var(--black);
  background-color: var(--white);
}
.btn--tertiary:not(:disabled, [disabled], .disabled) {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.btn--tertiary:hover, .btn--tertiary:focus-visible {
  color: var(--white);
}
@media (hover: hover) {
  .btn:not(.btn--sm) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn:not(.btn--sm)::before, .btn:not(.btn--sm)::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: "";
    border-radius: 50%;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .btn:not(.btn--sm)::before {
    top: 100%;
    left: 50%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
  }
  .btn:not(.btn--sm)::after {
    top: 180%;
    left: 55%;
    width: 160%;
    height: 190%;
    background-color: var(--_bg-hover);
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
  }
  .btn:not(.btn--sm):hover::before, .btn:not(.btn--sm):hover::after, .btn:not(.btn--sm):focus-visible::before, .btn:not(.btn--sm):focus-visible::after {
    background-color: var(--_bg-hover);
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  .btn:not(.btn--sm):hover::before, .btn:not(.btn--sm):focus-visible::before {
    top: -35%;
  }
  .btn:not(.btn--sm):hover::after, .btn:not(.btn--sm):focus-visible::after {
    top: -45%;
  }
}
@media (hover: none) {
  .btn:not(.btn--sm):active {
    background-color: var(--_bg-hover);
  }
}
.btn.disabled, .btn:disabled, .btn[disabled] {
  color: var(--white);
  background-color: var(--slate-300);
}
.btn[data-copy] .btn-content-active {
  display: none;
}
.btn[data-copy][disabled] .btn-content {
  display: none;
}
.btn[data-copy][disabled] .btn-content-active {
  display: block;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-heading);
  justify-content: center;
  margin-top: var(--margin-block);
}
.btn-group .content-btn {
  margin: 0;
}