$shortcode-reveal-alt-color: $dark-gray !default;
$shortcode-reveal-alt-background: darken($reveal-background, 5) !default;

// Shortcode Reveal Mixins

@mixin shortcode-reveal {
  .shortcode-reveal {

    &.full {

      .panel-content {
        position: relative;
        overflow: hidden;
      }

      .shortcode-columns {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }
  }

  .shortcode-columns {
    @include xy-grid;
    height: 100%;
  }

  .shortcode-form,
  .shortcode-menu,
  .shortcode-preview {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    min-height: 100%;
  }

  .shortcode-menu {
    @include xy-cell(shrink, false);
    background: $shortcode-reveal-alt-background;
    min-width: 15rem;
    border-color: smart-scale($shortcode-reveal-alt-background, 5%);
    border-style: solid;
    border-width: 0 1px 0 0;

    .menu {

      li {

        &:not(:last-child) {
          border: 1px solid smart-scale($media-reveal-alt-background, 5%);
          border-width: 0 0 1px;
        }

        &.is-active, &.active {

          a {
            background: smart-scale($media-reveal-alt-background, 5%);
            color: $media-reveal-alt-color;
          }
        }
      }

      a {
        color: $media-reveal-alt-color;
        padding: $global-padding;
        background: none;
        outline: none;
      }
    }
  }

  .shortcode-form {
    @include xy-cell(shrink, false);
    padding: $global-padding;
    background: $shortcode-reveal-alt-background;
    width: 24rem;
    min-width: 20rem;
    border-color: smart-scale($shortcode-reveal-alt-background, 5%);
    border-style: solid;
    border-width: 0 0 0 1px;

    .panel-section {

      &.last {
        margin-bottom: $global-margin;

        &.border {
          border-bottom-width: 1px;
        }
      }
    }

    .shortcode-title {
      margin: (-$global-padding) (-$global-padding) $global-padding;
      padding: $global-padding;
      border-bottom: 1px solid smart-scale($shortcode-reveal-alt-background, 5%);
    }
  }

  .shortcode-preview {
    @include xy-cell(auto, false);
    padding: $global-padding;
    min-width: 20rem;

    .shortcode-content {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .no-content {
      font-size: 2rem;

      i {
        font-size: 5rem;
      }
    }

    iframe {
      margin: 0;
      display: block;
      width: 100%;
      pointer-events: none;
      user-select: none;
    }
  }

  .shortcode-inner {
    @include xy-grid(vertical, false);
    min-height: 100%;

    .shortcode-title {
      @include xy-cell(shrink, false);
    }

    .shortcode-content {
      @include xy-cell(auto, false);
    }
  }

  .shortcode-title {
    padding-bottom: $global-padding;
  }

  .shortcode-content {

    .panel:last-child {
      margin-bottom: 0;
    }
  }
}


// Shortcode Reveal Component

@mixin bedrock-shortcode-reveal {
  @include shortcode-reveal;
}