// Vodka CSS //
@import "vodka";

pre {
  border-radius: $rounded;
}

.demo-logo {
  width: 128px;
  height: 128px;
}

.demo-hero {
  display: flex;
  min-height: 100vh;

  @include media-query(md) {
    text-align: center;
  }
}

.demo-features {
  @include media-query(md) {
    .o-grid__col {
      margin-top: $spacing-0;
      padding-left: $grid-gutter;
      padding-right: $grid-gutter;
    }

    .o-grid__col:first-child {
      padding-left: $spacing-0;
    }

    .o-grid__col:last-child {
      padding-right: $spacing-0;
    }
  }
}

.demo-intro {
  min-height: 100vh;
}

.demo-sidebar {
  position: sticky;
  top: $spacing-10;

  @include media-query(md) {
    max-height: 90vh;
    overflow: auto;
  }

  .c-list__category {
    color: $color-gray-500;
    font-size: $text-sm;
    font-weight: $font-bold;
    letter-spacing: $tracking-wide;
    text-transform: uppercase;
  }

  .c-list__category:not(:first-child) {
    margin-top: $spacing-8;
  }

  .c-link--active {
    border-left: $border-4 solid $color-blue-500;
    padding-left: $spacing-3;
  }
}

.demo-docs {
  @include media-query(md) {
    margin-top: $spacing-0;
  }
}

.demo-pre {
  background: none;
  padding: $spacing-0;
  margin: $spacing-0;
}

.demo-container {
  text-align: center;
  background-color: $color-red-200;
  padding: $spacing-3;
}

.demo-grid {
  .o-grid__col {
    text-align: center;
    background-color: $color-red-200;
    border-left: $border-8 solid $color-white;
    border-right: $border-8 solid $color-white;
    padding: $spacing-3;

    &.o-grid__col--no-gutter {
      border: $border-0;
    }
  }

  .demo-grid .o-grid__col {
    background-color: $color-red-300;
  }

  &.o-grid--no-gutter .o-grid__col {
    padding: $spacing-0;
    padding-top: $spacing-3;
    padding-bottom: $spacing-3;
    border: $border-0;
  }
}

.demo-grid-colors {
  .o-grid__col:not(:first-child) {
    margin-top: $spacing-6;
  }

  @include media-query(sm) {
    .o-grid__col {
      margin-top: $spacing-6;
    }
  }

  @include media-query(lg) {
    .o-grid__col {
      margin-top: $spacing-0 !important;
    }

    .o-grid__col:nth-last-child(-n + 2) {
      margin-top: $spacing-6 !important;
    }
  }
}

.demo-grid-spacings {
  .o-grid__col {
    margin-top: $spacing-6;
  }

  @include media-query(lg) {
    .o-grid__col {
      margin-top: $spacing-0 !important;
    }

    .o-grid__col:nth-last-child(-n + 4) {
      margin-top: $spacing-6 !important;
    }
  }
}

.demo-box {
  display: block;
  position: relative;
  background-color: $color-gray-400;
  width: 100%;
  height: 200px;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &:after {
    content: attr(data-content);
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  &--all:before {
    border: 32px solid $color-red-300;
  }

  &--horizontal:before {
    border-top: 32px solid $color-red-300;
    border-bottom: 32px solid $color-red-300;
  }

  &--vertical:before {
    border-left: 32px solid $color-red-300;
    border-right: 32px solid $color-red-300;
  }

  &--top:before {
    border-top: 32px solid $color-red-300;
  }

  &--right:before {
    border-right: 32px solid $color-red-300;
  }

  &--bottom:before {
    border-bottom: 32px solid $color-red-300;
  }

  &--left:before {
    border-left: 32px solid $color-red-300;
  }

  &--negative:before {
    border: 32px solid $color-red-300;
    top: -32px;
  }
}