@charset "UTF-8";
/* Квадратная кнопка со стрелкой или иконкой соцсети (Figma: Square buttons 4176:13517).
   По умолчанию — 56, полупрозрачная светлая, для тёмного фона.
   Состояния: обычное (Figma «Activ»), hover, disabled (Figma «Enable»). */
.square-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-white-60);
  background-color: var(--color-white-4);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  transition: background-color var(--transition-duration) var(--transition-ease);
}
@media (hover: hover) {
  .square-button:hover {
    background-color: var(--color-white-8);
  }
}
.square-button:disabled, .square-button--disabled {
  color: var(--color-white-40);
  pointer-events: none;
}
.square-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.square-button--prev .square-button__icon {
  transform: rotate(180deg);
}
.square-button--size-48 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-8);
}
.square-button--size-adaptive {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-8);
}
@media (min-width: 768px) {
  .square-button--size-adaptive {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-12);
  }
}
.square-button--round {
  border-radius: 50%;
}
.square-button--dark {
  color: var(--color-black);
  background-color: var(--color-black-8);
}
@media (hover: hover) {
  .square-button--dark:hover {
    background-color: var(--color-black-20);
  }
}
.square-button--dark:disabled, .square-button--dark.square-button--disabled {
  color: var(--color-black-40);
}
.square-button--outline {
  color: var(--color-black);
  background-color: transparent;
  border-color: var(--color-black);
}
@media (hover: hover) {
  .square-button--outline:hover {
    background-color: var(--color-black-8);
  }
}
.square-button--outline:disabled, .square-button--outline.square-button--disabled {
  color: var(--color-black-40);
  border-color: var(--color-black-20);
}
.square-button--social {
  color: var(--color-white);
  background-color: var(--color-white-8);
}
@media (hover: hover) {
  .square-button--social:hover {
    background-color: var(--color-white-8);
  }
}
.square-button--dark.square-button--social {
  color: var(--color-black-bg);
  background-color: var(--color-black-20);
}
@media (hover: hover) {
  .square-button--dark.square-button--social:hover {
    background-color: var(--color-black-20);
  }
}
.square-button--fill-white {
  color: var(--color-black);
  background-color: var(--color-white);
}
@media (hover: hover) {
  .square-button--fill-white:hover {
    background-color: var(--color-gray);
  }
}
.square-button--hover-white {
  transition: color var(--transition-duration) var(--transition-ease), background-color var(--transition-duration) var(--transition-ease);
}
@media (hover: hover) {
  .square-button--hover-white:hover {
    color: var(--color-black);
    background-color: var(--color-white);
  }
}
.square-button--on-photo {
  color: var(--color-black);
  background-color: var(--color-white-40);
}
@media (hover: hover) {
  .square-button--on-photo:hover {
    background-color: var(--color-white-60);
  }
}
.square-button--on-photo:disabled, .square-button--on-photo.square-button--disabled {
  color: var(--color-black-40);
}
@media (min-width: 768px) {
  .square-button--on-photo {
    color: var(--color-white-60);
    background-color: var(--color-white-4);
  }
}
@media (min-width: 768px) and (hover: hover) {
  .square-button--on-photo:hover {
    background-color: var(--color-white-8);
  }
}
@media (min-width: 768px) {
  .square-button--on-photo:disabled, .square-button--on-photo.square-button--disabled {
    color: var(--color-white-40);
  }
}
.square-button--fill-black {
  color: var(--color-white-60);
  background-color: var(--color-black);
  border-color: var(--color-black-20);
}
@media (hover: hover) {
  .square-button--fill-black:hover {
    color: var(--color-white);
    background-color: var(--color-black);
  }
}