/*------------------------------------*\
    # DEMO CONTROLS
\*------------------------------------*/

.gel-c-demo-controls {
  position: relative;

  margin-top: 0;
  margin-right: -$gel-spacing-unit;
  margin-left: -$gel-spacing-unit;
  padding: $gel-spacing-unit;

  background-color: $gel-color--orange;
  color: $gel-color--white;

  @if $enhanced {
    @include mq($from: gel-bp-s) {
      margin-right: double(-$gel-spacing-unit);
      margin-left: double(-$gel-spacing-unit);
      padding: double($gel-spacing-unit);
    }

    @include mq($from: gel-bp-l) {
      margin: 0 0 quadruple($gel-spacing-unit);
    }
  }
}

.gel-c-demo-controls__options {
  margin-top: $gel-spacing-unit;

  @if $enhanced {
    @include mq($from: gel-bp-m) {
      margin-bottom: 0;
      position: absolute;
      bottom: double($gel-spacing-unit);
      #{$right}: double($gel-spacing-unit);
    }
  }
}

.gel-c-demo-controls__option {
  padding: 0;
  border: 0;
  outline: 0;

  color: #fff;

  background: none;

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

.gel-c-demo-controls__option + .gel-c-demo-controls__option {
  #{$margin-left}: $gel-spacing-unit;
}