@use "unit" as *;
@use "breakpoints" as *;

@include mobile {
  .svv-wgt-v2 {
    .svv-shell__header {
      gap: 10px;
      padding: 12px 16px 14px;
    }

    .svv-search {
      min-height: 46px;

      &::before {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background: var(--svv-text-muted);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m13.5 13.5-3.2-3.2'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }

    .svv-search input,
    .svv-field__input {
      min-height: 44px;
      font-size: 16px;
    }

    .svv-filters__toggle {
      width: 100%;
    }

    .svv-viewmode {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }

    .svv-viewmode button {
      min-height: 42px;
      padding: 0 8px;
    }

    .svv-quick button,
    .svv-filters__toggle,
    .svv-filters select,
    .svv-pagination select,
    .svv-filters__clear,
    .svv-calendar__clear,
    .svv-pagination button,
    .svv-card__cta,
    .svv-drawer__cta,
    .svv-submit,
    .svv-monthview__today {
      min-height: $svv-touch-target;
    }

    .svv-filters__field::after {
      height: $svv-touch-target;
    }

    .svv-drawer {
      --svv-drawer-inset: 0px;

      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
    }

    .svv-drawer--right {
      margin-inline-start: auto;
    }

    .svv-drawer--left {
      margin-inline-end: auto;
    }

    .svv-card__share,
    .svv-drawer__icon,
    .svv-modal__close,
    .svv-calendar__nav button,
    .svv-monthview__nav button {
      width: $svv-touch-target;
      height: $svv-touch-target;
    }

    .svv-shell__strip {
      padding: 12px 16px;
    }

    .svv-datestrip,
    .svv-datestrip__days {
      gap: 8px;
    }

    .svv-datestrip__days {
      scroll-snap-type: x mandatory;
    }

    .svv-datestrip__nav {
      width: $svv-touch-target;
      height: $svv-touch-target;
    }

    .svv-datestrip__chip {
      min-width: 68px;
      min-height: 58px;
      padding: 8px 10px;
    }

    .svv-shell__content {
      padding: 18px 8px 24px;
    }

    .svv-results__title {
      font-size: 24px;
      line-height: 1.18;
    }

    .svv-results__meta {
      font-size: 13px;
    }

    .svv-events--list .svv-card {
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 14px;
      padding: 16px 0;
      align-items: start;
    }

    .svv-events--list .svv-card:not(:has(.svv-card__media)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .svv-card__title {
      font-size: 16.5px;
      line-height: 1.3;
    }

    .svv-card__when,
    .svv-card__meta {
      font-size: 12.5px;
      row-gap: 2px;
    }

    .svv-card__action {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      margin-top: 2px;
    }

    .svv-card__actions {
      justify-content: flex-end;
      width: 100%;
    }

    .svv-card__cta {
      flex: 1;
      max-width: none;
    }

    .svv-card__price {
      font-size: 17px;
      line-height: 1.2;
    }

    .svv-events--grid .svv-events__items {
      gap: 14px;
    }

    .svv-events--grid .svv-card {
      align-items: stretch;
    }

    .svv-events--grid .svv-card__body {
      padding: 12px 14px 0;
    }

    .svv-events--grid .svv-card__title {
      font-size: 15.5px;
    }

    .svv-events--grid .svv-card__action {
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      gap: 10px;
      padding: 12px 14px 14px;
    }

    .svv-events--grid .svv-card__actions {
      display: grid;
      grid-template-columns: $svv-touch-target minmax(0, 1fr);
    }

    .svv-events--grid .svv-card__actions:not(:has(.svv-card__share)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .svv-monthview__cell {
      padding: 14px 16px;
    }

    .svv-monthview__date {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .svv-monthview__event {
      min-height: 42px;
      padding: 8px 12px;
      white-space: normal;
      font-size: 13px;
    }

    .svv-pagination {
      justify-content: center;
      row-gap: 12px;
      margin-top: 22px;
      font-size: 13px;
    }

    .svv-pagination button {
      padding-inline: 18px;
    }

    .svv-pagination__count,
    .svv-pagination__size {
      order: 1;
    }

    .svv-events__state {
      min-height: 200px;
      padding: 24px 18px;
    }
  }
}

@include phone {
  .svv-wgt-v2 {
    .svv-events--list .svv-card {
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 12px;
    }

    .svv-events--list .svv-card__media {
      aspect-ratio: 1;
    }

    .svv-card__action {
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      gap: 10px;
    }

    .svv-card__actions {
      display: grid;
      grid-template-columns: $svv-touch-target minmax(0, 1fr);
    }

    .svv-card__actions:not(:has(.svv-card__share)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .svv-events--grid .svv-events__items {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .svv-results__title {
      font-size: 22px;
    }
  }
}

@include mobile {
  .svv-wgt-v2-container.svv-wgt-v2-container .svv-wgt-v2 .svv-shell__content {
    padding-inline: 8px;
  }

  .svv-wgt-v2-container .svv-wgt-v2 {
    .svv-events--list .svv-card.svv-card,
    .svv-events--grid .svv-card.svv-card {
      border: 1px solid var(--svv-border);
      border-radius: var(--svv-radius);
    }

    .svv-events--list .svv-card.svv-card {
      padding: 16px 12px;
    }

    .svv-events--list .svv-events__items {
      gap: 14px;
    }
  }

  .svv-wgt-v2-container .svv-wgt-v2 .svv-card {
    .svv-card__action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .svv-card__pricing {
      display: grid;
      gap: 2px;
      text-align: start;
    }

    .svv-card__price {
      white-space: nowrap;
    }

    .svv-card__availability {
      white-space: normal;
    }

    .svv-card__actions {
      display: flex;
      width: auto;
      flex-shrink: 0;
      gap: 8px;
      margin-inline-start: auto;
    }

    .svv-card__cta {
      flex: 0 0 auto;
      min-width: 140px;
      padding-inline: 24px;
      font-size: 16px;
    }
  }
}