/* 
стилі кнопок

може бути елементом <button> або <a>, але завжди має бути клас "button":
  <button class="button">
    <span>Текст кнопки</span>
  </button>
  -----------АБО-----------
  <a href="#" class="button">
    <span>Текст кнопки</span>
  </a>

далі класи:
▼ button 
- використовується ЗАВЖДИ

▼ text-link / card / filled / outlined / icon
- text-link - виглядає як звичайна a'шка
- card - виглядає як картка, тобто велика така кнопка, яка займає всю ширину батьківського елемента
- filled - виглядає як звичайна маленька кнопка з фоном
- outlined - те саме, що і filled, але з прозорим фоном і обводкою
- icon - кругла кнопка з іконкою всередині, без тексту

▼ yellow / olive / black / white
- колір кнопки
- для filled і card: колір фону і тексту
- для outlined: колір обводки і тексту
- для text-link: колір тексту

▼ arrow / arrow + arrow-from-start (використовувати разом)
- просто arrow - додає стрілку праворуч від тексту при хавері, + текст зсувається вліво, а стрілка з'являється праворуч
- arrow + arrow-from-start - стрілка від початку, тобто вона вже є, але при хавері зсувається праворуч, а текст зсувається вліво
- для olive кнопки стрілка біла, для інших - чорна

*/

.button {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  border-radius: 100px;
  transition: all .3s ease-out;
}
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button.text-link {
  width: fit-content;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.button.text-link span {
  transition: all .3s ease-out;
}
.button.text-link.black {
  color: var(--black);
}
.button.text-link.black span {
  color: var(--black);
}
.button.text-link.white {
  color: white;
}
.button.text-link.white span {
  color: white;
}
.button.text-link:hover {
  color: var(--yellow_hover);
}
.button.text-link:hover span {
  color: var(--yellow_hover);
}
.button.text-link:active {
  color: var(--yellow_pressed);
}
.button.text-link:active span {
  color: var(--yellow_pressed);
}
.button.text-link svg {
  height: 24px;
  transition: all .3s ease-out;
}
.button.text-link:hover svg {
  stroke: var(--yellow_hover);
  transform: translateX(8px);
}

.button.card {
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.button.filled {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.filled.yellow {
  background: var(--yellow);
  color: var(--black);
}
.button.filled.yellow:hover {
  background: var(--yellow_hover);
  color: var(--black);
}
.button.filled.yellow:active {
  background: var(--yellow_pressed);
  color: var(--black);
}
.button.filled.olive {
  background: var(--olive);
  color: white;
}
.button.filled.olive:hover, .button.filled.olive:active {
  background: var(--olive_hover);
  color: white;
}

.button.outlined {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}
.button.outlined.white {
  border-color: rgba(255, 255, 255, 0.40);
  color: white;
}
.button.outlined.white:hover {
  border-color: white;
}
.button.outlined.white:active {
  border-color: white;
  background: rgba(255, 255, 255, 0.10);
}
.button.outlined.black {
  border-color: rgba(31, 27, 22, 0.40);
  color: var(--black);
}
.button.outlined.black:hover {
  border-color: var(--black);
}
.button.outlined.black:active {  
  border-color: var(--black);
  background: rgba(31, 27, 22, 0.10);
}

.button.icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.button.icon.olive {
  background: var(--olive);
}
.button.icon.olive:hover, .button.icon.olive:active {
  background: var(--olive_hover);
}


.button.full-width {
  width: 100%;
}
.button.fit-content {
  width: fit-content;
}


.button.arrow::after {
  content: '';
  opacity: 0;
  width: 0;
  overflow: hidden;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url('/wp-content/themes/cleanon/assets/icons/arrow-right.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: all .3s ease-out;
}
.button.arrow.arrow-from-start::after {
  opacity: 1;
  width: 24px;
  overflow: visible;
  margin-left: 16px;
}
.button.arrow span {
  transition: all .3s ease-out;
}
.button.arrow:hover span {
  transform: translateX(-8px);
}
.button.arrow:hover::after {
  opacity: 1;
  width: 24px;
  overflow: visible;
  margin-left: 16px;
}
.button.arrow.arrow-from-start:hover span {
  transform: translateX(-4px);
}
.button.arrow.arrow-from-start:hover::after {
  transform: translateX(4px);
}