.button {
  --gap: 2.1333333333vw;
}
@media (min-width: 720px) {
  .button {
    --gap: 1.25vw;
  }
}
@media (min-width: 1281px) {
  .button {
    --gap: 0.8333333333vw;
  }
}
@media (min-width: 2400px) {
  .button {
    --gap: 20px;
  }
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-color 0.3s, opacity 0.3s;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.button__icon {
  height: 1.3em;
}
.button_type_icon {
  position: relative;
}
.button_type_icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
}
.button_type_icon {
  aspect-ratio: 1/1;
}
.button_type_icon:hover:not(.button_disabled) {
  color: var(--color-brand-light);
}
.button_type_icon:active:not(.button_disabled) {
  color: var(--color-brand-dark);
}
.button_type_primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-light);
  color: var(--color-paper-white);
}
.button_type_primary:hover:not(.button_disabled) {
  background-color: var(--color-brand-light);
}
.button_type_primary:active:not(.button_disabled) {
  background-color: var(--color-brand-dark);
}
.button_type_secondary {
  background-color: var(--color-dark-water);
  color: var(--color-paper-white);
}
.button_type_secondary:hover:not(.button_disabled) {
  opacity: 0.8;
}
.button_type_secondary:active:not(.button_disabled) {
  opacity: 1;
}
.button_type_tertiary {
  --box-shadow: 0px 20px 25px 0px rgba(26, 30, 18, 0.04);
}
@media (min-width: 720px) {
  .button_type_tertiary {
    --box-shadow: 0px 64px 64px 0px rgba(26, 30, 18, 0.03);
  }
}
@media (min-width: 1281px) {
  .button_type_tertiary {
    --box-shadow: 0px 64px 64px 0px rgba(26, 30, 18, 0.03);
  }
}
@media (min-width: 2400px) {
  .button_type_tertiary {
    --box-shadow: 0px 64px 64px 0px rgba(26, 30, 18, 0.03);
  }
}
.button_type_tertiary {
  background-color: var(--color-clear-white);
  color: var(--color-wetty-asphalt);
  border: 1px solid var(--color-paper-white);
  opacity: 0.999;
  box-shadow: var(--box-shadow);
}
.button_type_tertiary:hover:not(.button_disabled) {
  opacity: 0.8;
}
.button_type_tertiary:active:not(.button_disabled) {
  opacity: 1;
}
.button_type_play {
  background-color: transparent;
  border: 1px solid var(--color-brand);
  color: var(--color-dark-water);
}
.button_type_play .button__icon {
  --height: 3.2vw;
}
@media (min-width: 720px) {
  .button_type_play .button__icon {
    --height: 0.9375vw;
  }
}
@media (min-width: 1281px) {
  .button_type_play .button__icon {
    --height: 0.625vw;
  }
}
@media (min-width: 2400px) {
  .button_type_play .button__icon {
    --height: 15px;
  }
}
.button_type_play .button__icon {
  color: var(--color-brand);
  height: var(--height);
}
.button_type_play .button__text {
  font-weight: 600;
}
.button_type_play:hover:not(.button_disabled) {
  opacity: 0.8;
}
.button_type_play:active:not(.button_disabled) {
  opacity: 1;
}
.button_type_text-only {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button_type_text-only:hover:not(.button_disabled) {
  color: var(--color-brand-light);
}
.button_type_text-only:active:not(.button_disabled) {
  color: var(--color-brand-dark);
}
.button_type_inline-link {
  --gap: 2.1333333333vw;
}
@media (min-width: 720px) {
  .button_type_inline-link {
    --gap: 0.625vw;
  }
}
@media (min-width: 1281px) {
  .button_type_inline-link {
    --gap: 0.4166666667vw;
  }
}
@media (min-width: 2400px) {
  .button_type_inline-link {
    --gap: 10px;
  }
}
.button_type_inline-link {
  display: inline;
  background-color: transparent;
  color: var(--color-brand);
  white-space: normal;
}
.button_type_inline-link:hover:not(.button_disabled) {
  color: var(--color-brand-light);
}
.button_type_inline-link .button__icon {
  display: inline-block;
  vertical-align: middle;
}
.button_type_inline-link .button__icon + .button__text {
  margin-left: var(--gap);
}
.button_type_inline-link .button-text + .button__icon {
  margin-left: var(--gap);
}
.button_size_s:not(.button_type_link) {
  --height: 5.3333333333vw;
  --side-padding: 2.6666666667vw;
  --gap: 1.6vw;
}
@media (min-width: 720px) {
  .button_size_s:not(.button_type_link) {
    --height: 2.109375vw;
  }
}
@media (min-width: 720px) {
  .button_size_s:not(.button_type_link) {
    --side-padding: 1.25vw;
  }
}
@media (min-width: 720px) {
  .button_size_s:not(.button_type_link) {
    --gap: 0.46875vw;
  }
}
@media (min-width: 1281px) {
  .button_size_s:not(.button_type_link) {
    --height: 1.40625vw;
  }
}
@media (min-width: 1281px) {
  .button_size_s:not(.button_type_link) {
    --side-padding: 0.8333333333vw;
  }
}
@media (min-width: 1281px) {
  .button_size_s:not(.button_type_link) {
    --gap: 0.3125vw;
  }
}
@media (min-width: 2400px) {
  .button_size_s:not(.button_type_link) {
    --height: 33.75px;
  }
}
@media (min-width: 2400px) {
  .button_size_s:not(.button_type_link) {
    --side-padding: 20px;
  }
}
@media (min-width: 2400px) {
  .button_size_s:not(.button_type_link) {
    --gap: 7.5px;
  }
}
.button_size_s:not(.button_type_link) {
  height: var(--height);
  border-radius: var(--height);
  padding: 0 var(--side-padding);
  gap: var(--gap);
}
.button_size_s:not(.button_type_link).button_type_secondary {
  background-color: var(--color-elephant-bone);
  color: var(--color-dark-water);
}
.button_size_m:not(.button_type_link) {
  --side-padding: 7.4666666667vw;
  --gap: 2.1333333333vw;
}
@media (min-width: 720px) {
  .button_size_m:not(.button_type_link) {
    --side-padding: 2.1875vw;
  }
}
@media (min-width: 720px) {
  .button_size_m:not(.button_type_link) {
    --gap: 0.78125vw;
  }
}
@media (min-width: 1281px) {
  .button_size_m:not(.button_type_link) {
    --side-padding: 1.4583333333vw;
  }
}
@media (min-width: 1281px) {
  .button_size_m:not(.button_type_link) {
    --gap: 0.5208333333vw;
  }
}
@media (min-width: 2400px) {
  .button_size_m:not(.button_type_link) {
    --side-padding: 35px;
  }
}
@media (min-width: 2400px) {
  .button_size_m:not(.button_type_link) {
    --gap: 12.5px;
  }
}
.button_size_m:not(.button_type_link) {
  height: var(--button-size-m-height);
  border-radius: var(--button-size-m-height);
  padding: 0 var(--side-padding);
  gap: var(--gap);
}
.button_size_m:not(.button_type_link).button_type_text-only {
  --side-padding: 0vw;
}
@media (min-width: 720px) {
  .button_size_m:not(.button_type_link).button_type_text-only {
    --side-padding: 0vw;
  }
}
@media (min-width: 1281px) {
  .button_size_m:not(.button_type_link).button_type_text-only {
    --side-padding: 0vw;
  }
}
@media (min-width: 2400px) {
  .button_size_m:not(.button_type_link).button_type_text-only {
    --side-padding: 0px;
  }
}
.button_size_m:not(.button_type_link).button_type_tertiary {
  --side-padding: 5.3333333333vw;
}
@media (min-width: 720px) {
  .button_size_m:not(.button_type_link).button_type_tertiary {
    --side-padding: 1.5625vw;
  }
}
@media (min-width: 1281px) {
  .button_size_m:not(.button_type_link).button_type_tertiary {
    --side-padding: 1.0416666667vw;
  }
}
@media (min-width: 2400px) {
  .button_size_m:not(.button_type_link).button_type_tertiary {
    --side-padding: 25px;
  }
}
.button_size_l:not(.button_type_link) {
  --height: 13.8666666667vw;
  --border-radius: 13.8666666667vw;
  --side-padding: 7.4666666667vw;
  --gap: 3.7333333333vw;
}
@media (min-width: 720px) {
  .button_size_l:not(.button_type_link) {
    --height: 4.6875vw;
  }
}
@media (min-width: 720px) {
  .button_size_l:not(.button_type_link) {
    --border-radius: 4.6875vw;
  }
}
@media (min-width: 720px) {
  .button_size_l:not(.button_type_link) {
    --side-padding: 2.1875vw;
  }
}
@media (min-width: 720px) {
  .button_size_l:not(.button_type_link) {
    --gap: 1.09375vw;
  }
}
@media (min-width: 1281px) {
  .button_size_l:not(.button_type_link) {
    --height: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .button_size_l:not(.button_type_link) {
    --border-radius: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .button_size_l:not(.button_type_link) {
    --side-padding: 1.4583333333vw;
  }
}
@media (min-width: 1281px) {
  .button_size_l:not(.button_type_link) {
    --gap: 0.7291666667vw;
  }
}
@media (min-width: 2400px) {
  .button_size_l:not(.button_type_link) {
    --height: 75px;
  }
}
@media (min-width: 2400px) {
  .button_size_l:not(.button_type_link) {
    --border-radius: 75px;
  }
}
@media (min-width: 2400px) {
  .button_size_l:not(.button_type_link) {
    --side-padding: 35px;
  }
}
@media (min-width: 2400px) {
  .button_size_l:not(.button_type_link) {
    --gap: 17.5px;
  }
}
.button_size_l:not(.button_type_link) {
  height: var(--height);
  border-radius: var(--border-radius);
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  gap: var(--gap);
}
.button_size_l:not(.button_type_link).button_type_text-only {
  padding-left: 0;
  padding-right: 0;
}
.button_disabled {
  cursor: not-allowed;
  opacity: 0.4;
}