//
// Custom containers for Storybook.
//
// Containers are used to wrap stories elements into visually digestible
// structures.

@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

.story-container {
  $root: &;

  // Make sure to not use margins as they will negate each other and testing
  // layouts will be giving false positives.
  margin-bottom: ct-spacing(2);

  #{$root}__title {
    @include ct-typography('label-large');
    @include ct-container();

    & {
      border-bottom: solid ct-particle(0.125);
      margin-bottom: ct-spacing(2);
      margin-top: ct-spacing(4);
    }
  }

  #{$root}__subtitle {
    @include ct-typography('label-regular');
    @include ct-container();

    & {
      margin-top: ct-spacing(3);
      margin-bottom: ct-spacing(2);
    }
  }

  #{$root}__content {
    @include ct-container();

    & {
      margin-bottom: ct-spacing(4);
    }
  }

  #{$root}__subcontent {
    margin-bottom: ct-spacing(4);
  }

  &#{$root}--columns {
    display: flex;
  }

  &#{$root}--columns--2 {
    #{$root}__column {
      width: 50%;
      padding: ct-spacing(2);
    }
  }

  #{$root}__column {
    flex: 1;

    &--light {
      background: ct-color-light('background-light');

      #{$root}__title,
      #{$root}__subtitle {
        color: ct-color-light('heading');
      }

      #{$root}__content,
      #{$root}__subcontent {
        color: ct-color-light('body');
      }
    }

    &--dark {
      background: ct-color-dark('background');

      #{$root}__title,
      #{$root}__subtitle {
        color: ct-color-dark('heading');
      }

      #{$root}__content,
      #{$root}__subcontent {
        color: ct-color-dark('body');
      }
    }
  }
}

code {
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #e1e1e8;
  color: #d63384;
  display: inline-block;
  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 0.9em;
  padding: 0 0.25em;
  vertical-align: top;
}
