/**
 * @file
 * Responsive styles for views grid horizontal layout.
 */

@import "../base/variables.pcss.css";

:root {
  --views-grid-layout-gap: var(--sp);
}

.views-view-grid--horizontal {
  display: flex;
  flex-wrap: wrap;

  &.cols-1 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;
    }
  }

  &.cols-2 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-3 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 3 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(3n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-4 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 4 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(4n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-5 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--sm) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 3 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(3n) {
          margin-inline-end: 0;
        }
      }

      /* 5 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 5 - (((5 - 1) / 5) * var(--views-grid-layout-gap)));

        &:nth-child(3n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(5n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-6 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--sm) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 3 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(3n) {
          margin-inline-end: 0;
        }
      }

      /* 6 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 6 - (((6 - 1) / 6) * var(--views-grid-layout-gap)));

        &:nth-child(3n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(6n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-7 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--sm) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 3 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(3n) {
          margin-inline-end: 0;
        }
      }

      /* 7 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 7 - (((7 - 1) / 7) * var(--views-grid-layout-gap)));

        &:nth-child(3n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(7n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  &.cols-8 {
    & > * {
      flex-basis: 100%;
      margin-inline-end: 0;

      /* 2 column layout. */
      @media (--sm) {
        flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
        margin-inline-end: var(--views-grid-layout-gap);

        &:nth-child(2n) {
          margin-inline-end: 0;
        }
      }

      /* 4 column layout. */
      @media (--md) {
        flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));

        &:nth-child(2n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(4n) {
          margin-inline-end: 0;
        }
      }

      /* 8 column layout. */
      @media (--lg) {
        flex-basis: calc(100% / 8 - (((8 - 1) / 8) * var(--views-grid-layout-gap)));

        &:nth-child(4n) {
          margin-inline-end: var(--views-grid-layout-gap);
        }

        &:nth-child(8n) {
          margin-inline-end: 0;
        }
      }
    }
  }

  & > * {
    flex-grow: 0;
    flex-shrink: 0;
    margin-block-end: var(--views-grid-layout-gap);
  }
}