// Code demo styles
.sc-demo {
  .highlight {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
}

.sc-demo__output {
  padding: 1.5rem;

  font: 81.25%/1.75 "Open Sans", sans-serif;

  border: 1px solid rgba(#25282B, .1);
  border-radius: 4px 4px 0 0;

  @import "vendor/scooter";

}
.sc-demo--grid {
  .o-grid__col {
    background-color: rgba(#FFBB01, .3);
    background-clip: content-box;
    height: 20px;
    margin-bottom: 20px;
  }
}

.sc-demo--modal {
  .sc-demo__output {
    padding: 0;
    overflow: hidden;
  }

  .c-modal-overlay {
    position: relative;
  }
}

.sc-demo--padding {
  .sc-demo__output {
    span {
      display: inline-block;

      background-color: rgba(#7b8994, .3);
      background-clip: content-box;
      border: 1px solid currentColor;
    }
  }
}
.sc-demo--margin {
    .sc-demo__output {
        div {
            background-color: rgba(#7b8944, .2);
            overflow: hidden;

            [class*="u-mar-"] {
                background-color: rgba(#7b8944, .2);
            }
        }
    }
}

// Color pallette demo styles
@import "../../../../scss/variables/colors";

@each $key, $value in $DBglobalColors {
  $selector: '.cp-#{inspect($key)}';
  @if type-of($value) == color {
    #{$selector} {
      background-color: $value;
    }
  } @else {
    @each $lightness, $color in $value {
      $deepSelector: $selector + '-#{$lightness}';

      #{$deepSelector} {
        background-color: $color;
      }
    }
  }
}

@each $key, $value in $DBgrayscaleColors {
  $selector: '.cp-grayscale-#{inspect($key)}';
  @if type-of($value) == color {
    #{$selector} {
      background-color: $value;
    }
  }
}

.cp-demo {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0;

    font-family: inherit;

    border-radius: 3px;


    span {
        min-height: 1.5rem;
        height: 10vh;
        flex: 1 1 calc(100%/6);

        transition: .1s ease;

        &:hover {
            z-index: 1;
            transform: scale(1.2);

            border-radius: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }
    }

    &--grayscale span {
        flex: 1 1 20%;
    }
}

.wcag {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    padding-left: 1.5em;

    font-weight: 600;
    font-size: .5rem;

    color: rgba(255,255,255,.9);

    background-image: url('../images/wcag-check.svg');
    background-size: 1em auto;
    background-repeat: no-repeat;
    background-position: top 4px left;
}
