// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";

// Explanation module styles
// ------------------------------------------------------------------------------

%expose_after {
  &:after {
    content: "";
    display: block;
    height: 48px;
    background-color: rgba($delta_color, .1) !important;
  }
}
%expose_before {
  &:before {
    content: "";
    display: block;
    height: 48px;
    background-color: rgba($delta_color, .1) !important;
  }
}
%expose {
  &:before, &:after {
    content: "";
    display: block;
    height: 48px;
    background-color: rgba($delta_color, .1) !important;
  }
}
%exp {
}
%exp_hidden {
  display: none;
}

.exp_wrap {
  position: relative;
}

.exp_pop {
  @extend %exp_hidden !optional;
  position: absolute;
  z-index: 100;
  top: $space_5;
  left: $space_5;
  padding: $half_space;
  border: 4px solid $basic_back_color;
  border-radius: 4px;
  background-color: $basic_back_color;
  pointer-events: none;
}
.exp_marker_pop {
  position: absolute;
  top: -$basic_size / 4 * 3;
  right: -$basic_size / 2;
  width: $basic_size;
  height: $basic_size;
  border: $tiny_space solid $basic_highlight_color;
  border-radius: $basic_size;
  color: $basic_highlight_color;
  background-color: $dark_color;
}

.exp_expose {
  @extend %expose !optional;
}
.exp_expose_pre {
  @extend %expose_after;
}
.exp_expose_post {
  @extend %expose_before;
}

.exp_overlay_btn {
  position: fixed;
  width: 3em;
  height: 2em;
	// padding: $basic_space $basic_space * 2;
  cursor: pointer;
}
.exp_help_btn {
  display: table;
  right: $space_2;
  bottom: $space_2;
  background-color: rgba($dark_color, .4);
  &:hover {
    background-color: $bright_color;
    > .span__solo {
      color: $dark_color;
    }
  }
  .span__solo {
    display: table-cell;
    color: rgba($bright_color, .8);
		font-family: $monospace_font_family;
		font-size: 1.4em;
    text-align: center;
    vertical-align: middle;
  }
}



.expose_height {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba($delta_color, .1) !important;
  @include vendor-prefix(transition, height .5s ease);
}