/*
 * Buttons: ._btn and the coloured ._btn-colored of the «Кнопка-посилання» block
 * (blocks/block-page-link-button.php) and of templates. One file for the site
 * and the block editor (includes/core/enqueue.php), so a button looks the same
 * in both; the editor used to carry its own copy, which fell behind.
 */

._btn {
  position: relative;
  z-index: 0;
  max-width: 15.625rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 0;
  border-radius: 3.125rem;
  padding: 0.625rem 1.875rem;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 1rem;
  line-height: 118.75%;
  font-weight: 400;
  color: var(--color-text-heading);
  background-color: var(--color-bg-primary);
}

._btn-colored {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 0.625rem 1.25rem;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  line-height: 150%;
  color: currentColor;
  text-decoration: none;
}

@media (min-width: 900px) {
  ._btn-colored {
    font-size: 1rem;
  }
}

@media (max-width: 899px) {
  ._btn-colored {
    font-size: 0.875rem;
  }
}

html:not(.v-mobile) ._btn-colored:hover {
  text-decoration: none !important;
}

html:not(.v-mobile) ._btn-colored:hover span {
  color: var(--color-white);
}

html:not(.v-mobile) ._btn-colored:hover::after {
  -webkit-transform: translate(0);
  transform: translate(0);
}

._btn-colored:focus-visible span {
  color: var(--color-white);
}

._btn-colored:focus-visible::after {
  -webkit-transform: translate(0);
  transform: translate(0);
}

._btn-colored::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid currentColor;
}

._btn-colored::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: currentColor;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

._btn-colored span {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  pointer-events: none;
}

._btn-colored span svg {
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition:
    transform 0.3s,
    -webkit-transform 0.3s;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@media (min-width: 900px) {
  ._btn-colored span svg {
    max-width: 1.5rem;
    margin-left: 0.875rem;
  }
}

@media (max-width: 899px) {
  ._btn-colored span svg {
    max-width: 18px;
    margin-left: 0.625rem;
  }
}

._btn-colored span svg path {
  stroke: currentColor;
  -webkit-transition: stroke 0.3s ease;
  transition: stroke 0.3s ease;
}

._btn-colored._btn-light-blue {
  border: 1px solid var(--color-accent);
  background-color: var(--color-bg-primary);
  color: var(--color-link);
}

html:not(.v-mobile) ._btn-colored._btn-light-blue:hover span {
  color: var(--color-white);
}

._btn-colored._btn-light-blue:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-light-blue:after {
  background-color: var(--color-blue-100);
}

._btn-colored._btn-blue {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-bg-primary);
  color: var(--color-text-heading);
}

html:not(.v-mobile) ._btn-colored._btn-blue:hover span {
  color: var(--color-white);
}

._btn-colored._btn-blue:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-blue:after {
  background-color: var(--color-blue-200);
}

._btn-colored._btn-green {
  border: 1px solid var(--color-green-100);
  background-color: var(--color-bg-primary);
  color: var(--color-green-100);
}

html:not(.v-mobile) ._btn-colored._btn-green:hover span {
  color: var(--color-white);
}

._btn-colored._btn-green:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-green:after {
  background-color: var(--color-green-100);
}

._btn-colored._btn-orange {
  border: 1px solid var(--color-highlight);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html:not(.v-mobile) ._btn-colored._btn-orange:hover span {
  color: var(--color-text-primary);
}

._btn-colored._btn-orange:before {
  border: 1px solid var(--color-highlight);
}

._btn-colored._btn-orange:after {
  background-color: var(--color-highlight);
}