@use "sass:map";
@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/animate-underline";
@use "@naomi-2025/ui-core/border-radius";
@use "@naomi-2025/ui-core/colors";
@use "@naomi-2025/ui-core/maps";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.view--content-projects {
  &.view--block-all {
    --view--row--margin-top: 0;

    .view__rows {
      display: grid;
      gap: 0px;

      + .view__rows {
        margin-top: calc(var(--view-row-content-height) * -1);
      }

      .view__row--1 {
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-south-beach, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-bubblegum, 'color') };
        }
      }

      .view__row--2 {
        --border-radius: #{ border-radius.top-arch() };
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-sunset, 'color') };
        }
      }

      .view__row--3 {
        --border-radius: #{ border-radius.bottom-arch() };
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-iceland, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-iceland, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-oxblood, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-oxblood, 'color') };
        }
      }

      .view__row--4 {
        --border-radius: #{ border-radius.circle() };
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-2') };
          --bg-color: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-newport, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-2') };
          --bg-color: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-pinata, 'color') };
        }
      }

      .view__row--5 {
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --a--color: #{ map.get(maps.$site-mode-at-work, 'color') };
        }

        [data-site-mode="at-play"] & {
          --a--color: #{ map.get(maps.$site-mode-at-play, 'color') };
        }
      }

      .view__row--6 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.right-arch() };

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-4') };
          --bg-color: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-newport, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-4') };
          --bg-color: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-pinata, 'color') };
        }
      }

      .view__row--7 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.top-arch() };

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-1') };
          --bg-color: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-1') };
          --bg-color: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-sunset, 'color') };
        }
      }

      .view__row--8 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.left-arch() };

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-sunset, 'color') };
        }
      }

      .view__row--9 {
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-iceland, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-iceland, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-oxblood, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-oxblood, 'color') };
        }
      }

      .view__row--10 {
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --a--color: #{ map.get(maps.$site-mode-at-work, 'color') };
        }

        [data-site-mode="at-play"] & {
          --a--color: #{ map.get(maps.$site-mode-at-play, 'color') };
        }
      }

      .view__row--11 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.bottom-arch() };

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-newport, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-newport, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-pinata, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-pinata, 'color') };
        }
      }

      .view__row--12 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.bottom-arch() };

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-2') };
          --bg-color: #{ map.get(maps.$color-scheme-iceland, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-iceland, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-2') };
          --bg-color: #{ map.get(maps.$color-scheme-oxblood, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-oxblood, 'color') };
        }
      }

      .view__row--13 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.left-arch() };

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-3') };
          --bg-color: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-south-beach, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-3') };
          --bg-color: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-bubblegum, 'color') };
        }
      }

      .view__row--14 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.circle() };

        [data-site-mode="at-work"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-work, 'accent-bg-color-1') };
          --bg-color: #{ map.get(maps.$color-scheme-santa-monica, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-santa-monica, 'color') };
        }

        [data-site-mode="at-play"] & {
          --accent-bg-color: #{ map.get(maps.$site-mode-at-play, 'accent-bg-color-1') };
          --bg-color: #{ map.get(maps.$color-scheme-sunset, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-sunset, 'color') };
        }
      }

      .view__row--15 {
        --a--color--active: var(--a--color);

        [data-site-mode="at-work"] & {
          --a--color: #{ map.get(maps.$site-mode-at-work, 'color') };
        }

        [data-site-mode="at-play"] & {
          --a--color: #{ map.get(maps.$site-mode-at-play, 'color') };
        }
      }

      .view__row--16 {
        --a--color--active: var(--a--color);
        --border-radius: #{ border-radius.left-arch() };

        [data-site-mode="at-work"] & {
          --bg-color: #{ map.get(maps.$color-scheme-south-beach, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-south-beach, 'color') };
        }

        [data-site-mode="at-play"] & {
          --bg-color: #{ map.get(maps.$color-scheme-bubblegum, 'bg-color') };
          --a--color: #{ map.get(maps.$color-scheme-bubblegum, 'color') };
        }
      }
    }

    .view__row-content {
      width: 100%;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      place-content: center;
      position: sticky;
      top: var(--site-header-height);
      text-align: center;
      background-color: var(--accent-bg-color);
      overflow: hidden;
      padding: site-config.spacer(0);

      a {
        --animate-underline--bg-position-y: bottom;
        @extend %animate-underline-in-to-right;

        span {
          @extend %text-style-h4;
        }

        &::after {
          overflow: hidden;
          border-radius: var(--border-radius);
          background-color: var(--bg-color);
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
        }
      }
    }

    // 2 Columns
    @container (width > 500px) {
      .view__rows {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(13, 1fr);

        &:last-child {
          grid-template-rows: repeat(12, 1fr);
        }
      }

      .view__row {
        &--2 {
          grid-row: 2 / span 2;
        }

        &--3 {
          grid-row-start: 2;
        }

        &--4 {
          grid-column-start: 2;
          grid-row-start: 3;
        }

        &--5 {
          grid-row-start: 4;
        }

        &--6 {
          grid-row: 4 / span 2;
        }

        &--7 {
          grid-row: 5 / span 2;
        }

        &--8 {
          grid-row: 6 / span 2;
          grid-column-start: 2;
        }

        &--9 {
          grid-row-start: 7;
        }

        &--10 {
          grid-row-start: 8;
        }

        &--11 {
          grid-row: 8 / span 2;
        }

        &--12 {
          grid-row: 9 / span 2;
        }

        &--13 {
          grid-column-start: 2;
          grid-row-start: 10;
        }

        &--14 {
          grid-column-start: 2;
          grid-row-start: 11;
        }

        &--15 {
          grid-row: 11 / span 2;
          grid-column-start: 1;
        }

        &--16 {
          grid-row: 12 / span 2;
          grid-column-start: 2;
        }
      }
    }

    // 3 Columns
    @container (width > 1000px) {
      .view__rows {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(9, 1fr);

        &:last-child {
          grid-template-rows: repeat(8, 1fr);
        }
      }

      .view__row {
        &--2 {
          grid-row: unset;
        }

        &--3 {
          grid-row-start: unset;
          grid-row: 2 / span 2;
        }

        &--4 {
          grid-column-start: unset;
          grid-row-start: 2;
        }

        &--5 {
          grid-row-start: 2;
        }

        &--6 {
          grid-row: span 2 / span 2;
          grid-column-start: 2;
        }

        &--7 {
          grid-row: 3 / span 3;
          grid-column-start: 3;
        }

        &--8 {
          grid-column-start: unset;
          grid-row: unset;
          grid-row-start: 4;
        }

        &--9 {
          grid-row-start: unset;
          grid-row: 5 / span 2;
        }

        &--10 {
          grid-row-start: 5;
        }

        &--11 {
          grid-row: unset;
          grid-column-start: 2;
          grid-row-start: 6;
        }

        &--12 {
          grid-row: unset;
          grid-column-start: 3;
          grid-row-start: 6;
        }

        &--13 {
          grid-column-start: unset;
          grid-row-start: unset;
          grid-row: 7 / span 2;
        }

        &--14 {
          grid-column-start: unset;
          grid-row-start: unset;
          grid-row: 7 / span 2;
        }

        &--15 {
          grid-row: unset;
          grid-column-start: unset;
          grid-row-start: 7;
        }

        &--16 {
          grid-column-start: 3;
          grid-row: 8 / span 2;
        }
      }
    }
  }
}
