@charset "UTF-8";
/* Кнопка «Подробнее» с раскрытием (перенос ButtonDetails из лендинга, вид — по макету).
   Свёрнута: видна только иконка в кружке. Раскрыта: фон-«пилюля» вырастает из кружка, текст проявляется.
   API: родитель ставит --details-button-open: 1 (например, на hover карточки), а --details-button-background —
   цвет пилюли поверх модификатора, --details-button-rest: 1 — в свёрнутом виде виден круг фона 40 / 36 под
   кружком (большая карточка «Афиши»). Без hover — раскрыта всегда.
   Текст всегда в потоке — ширина кнопки не меняется, двигается только фон. */
.details-button {
  --_open: var(--details-button-open, 0);
  --_height: 2.5rem;
  --_color: var(--color-white);
  --icon-circle-hover: var(--details-button-open, 0);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.75rem;
  align-items: center;
  height: var(--_height);
  padding: 0 0.375rem 0 1rem;
  color: var(--color-black);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
@media (hover: none) {
  .details-button {
    --_open: 1;
  }
}
@media (hover: hover) {
  .details-button:hover {
    --details-button-open: 1;
  }
}
.details-button:focus-visible {
  --details-button-open: 1;
}
.details-button::before {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: -1;
  width: calc(var(--_height) + var(--_open) * (100% - var(--_height)));
  background-color: var(--details-button-background, var(--_color));
  border-radius: var(--radius-pill);
  opacity: max(var(--_open), var(--details-button-rest, 0));
  transition: width var(--transition-duration) var(--transition-ease), opacity var(--transition-duration) var(--transition-ease), background-color var(--transition-duration) var(--transition-ease);
  content: "";
}
.details-button__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  clip-path: inset(0 0 0 calc((1 - var(--_open)) * 100%));
  transform: translateX(calc((1 - var(--_open)) * 0.5rem));
  transition: clip-path var(--transition-duration) var(--transition-ease), transform var(--transition-duration) var(--transition-ease);
}
.details-button__icon {
  transition: transform var(--transition-duration) var(--transition-ease);
}
.details-button--size-36 {
  --_height: 2.25rem;
  gap: 0.5rem;
  padding: 0 0.25rem 0 0.75rem;
}
.details-button--green {
  --_color: var(--color-green);
}
.details-button--static {
  --_open: 1;
}
.details-button--active .details-button__icon {
  transform: rotate(45deg);
}