//
// CivicTheme Grid component story styles.
//

@use 'sass:math';

.story-grid-outlines {
  $_container-color: red;
  $_fluid-container-color: purple;
  $_row-color: orange;
  $_template-column-color: green;
  $_auto-column-color: blue;
  $_placeholder-text-color: grey;
  $_story-container-color: #25324d;

  .container,
  .container-fluid {
    background-color: rgba($_container-color, 0.025);
    box-shadow: 0 0 1px 1px $_container-color inset;

    .row,
    ul {
      counter-reset: story-coloumn-counter;
      background-color: rgba($_row-color, 0.2);
      outline: 1px solid rgba($_row-color, 0.2);

      // Column.
      > .col,
      > [class*='col-'],
      > li {
        counter-increment: story-coloumn-counter;
        position: relative;

        &::after {
          content: counter(story-coloumn-counter) ' of ' attr(data-story-total-columns);
          position: absolute;
          bottom: 2px;
          right: 0;
          left: 0;
          text-align: center;
          font-size: 0.6em;
        }

        .row,
        ul {
          counter-reset: story-column-nested-counter;

          > .col,
          > [class*='col-'],
          > li {
            counter-increment: story-column-nested-counter;

            &::after {
              content: 'Nested ' counter(story-column-nested-counter) ' of ' attr(data-story-total-columns);
              left: auto;
              font-size: 0.4em;
            }
          }
        }

        @mixin _ct-story-placeholder-meta($width) {
          position: relative;

          &::before {
            content: ct-string($width);
            color: $_placeholder-text-color;
            position: absolute;
            top: 2px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.6em;
            font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            white-space: nowrap;
          }
        }

        // Column content.
        .story-placeholder {
          @include _ct-story-placeholder-meta('100%');
        }

        .story-placeholder--hugged {
          @include _ct-story-placeholder-meta('auto');
        }

        .story-placeholder--fixed {
          $_width: math.div(ct-breakpoint-next($ct-grid-lowest-breakpoint), 2);

          @include _ct-story-placeholder-meta($_width);
        }
      }

      // Column colors.
      > [class*='col-'] {
        background-color: rgba($_template-column-color, 0.1);
        outline: 1px solid rgba($_template-column-color, 0.5);

        &::after {
          color: $_template-column-color;
        }
      }

      > .col,
      > li {
        background-color: rgba($_auto-column-color, 0.1);
        outline: 1px solid rgba($_auto-column-color, 0.5);

        &::after {
          color: $_auto-column-color;
        }
      }
    }
  }

  .container-fluid {
    background-color: rgba($_fluid-container-color, 0.025);
    box-shadow: 0 0 1px 1px $_fluid-container-color inset;
  }

  &.grid-story-docs {
    row-gap: 1em;

    > * {
      margin-right: 1em;
      white-space: nowrap;
    }

    @mixin _ct-story-docs-color-square($color) {
      &::before {
        content: '';
        display: inline-block;
        height: 1em;
        width: 1em;
        background-color: $color;
        margin-right: 0.5em;
        vertical-align: top;
      }
    }

    .grid-story-docs-color-container-contained {
      @include _ct-story-docs-color-square($_container-color);
    }

    .grid-story-docs-color-container-fluid {
      @include _ct-story-docs-color-square($_fluid-container-color);
    }

    .grid-story-docs-color-row {
      @include _ct-story-docs-color-square($_row-color);
    }

    .grid-story-docs-color-template-column {
      @include _ct-story-docs-color-square($_template-column-color);
    }

    .grid-story-docs-color-auto-column {
      @include _ct-story-docs-color-square($_auto-column-color);
    }

    .grid-story-docs-color-placeholder {
      @include _ct-story-docs-color-square($_placeholder-text-color);
    }
  }

  .story-container__title,
  .story-container__subtitle {
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0 0 1px 1px $_story-container-color inset;
  }

  .story-container__title {
    padding-bottom: ct-spacing(2);
    padding-top: ct-spacing(4);
  }

  .story-container__subtitle {
    padding-top: ct-spacing(3);
    padding-bottom: ct-spacing(2);
  }
}

@include ct-story-docs-conditional('.story-grid-outlines');
