// openassessment: elements - navigation
// ====================

// NOTES:
// * openassessment-specific navigation UI

// --------------------
// collapse/expand
// --------------------

.ui-toggle-visibility {

  // control to toggle
  .ui-toggle-visibility__control {
    @include transition(color $tmg-f2 ease-in);
    @extend %fake-link;
    text-decoration: none;

    // optional icon
    .icon, .ui-toggle-visibility__control__copy {
      display: inline-block;
      vertical-align: middle;
    }

    > .icon {
      @include transition(all $tmg-f2 ease-in-out 0s);
      @include transform(rotate(bidi-rotate-angle(90deg)));
    }

    .ui-toggle-visibility__control__copy {
      @include margin-left(($baseline-h/4));
    }

    &:hover, &:focus {
      color: $action-primary-color-focus;
    }

    &:active, &.is--current {
      color: $action-primary-color-active;
    }
  }

  // item being toggled
  .ui-toggle-visibility__content {
    @include transition(opacity $tmg-f1 ease-in 0, max-height $tmg-f2 ease-in 0);
    @extend %trans-opacity;
    max-height: ($baseline-v*2000);
    opacity: 1.0;
    @include padding-left(($baseline-h/20));
    @include padding-right(($baseline-h/20));
  }

  // STATE: is collapsed
  &.is--collapsed {

    >.ui-toggle-visibility__control > .icon {
      @include transform(rotate(bidi-rotate-angle(0deg)));
      @include transform-origin(50% 50%);
    }

    // item being toggled
    .ui-toggle-visibility__content {
      @include transition(opacity $tmg-f2 ease-in 0, max-height $tmg-f1 ease-in 0);
      @extend %trans-opacity;
      max-height: 0;
      overflow: hidden;
      opacity: 0.0;
    }
  }
}

// --------------------
// ui tooltips/hints - based on https://github.com/chinchang/hint.css
// --------------------
.has--hints {
  overflow: visible;
}

.ui-hint {
  @extend %fake-link;

  .icon {
    @include margin-left(($baseline-h/8));
  }

  // STATE: hover
  &:hover, &:focus {
    color: $action-primary-color-focus;
  }

//   actual tooltip rendered
  &:after {
    @include left(0);
    display: block;
    white-space: normal;
    width: ($baseline-h*5);
    background: $black-t3;
  }

  &.hint--top:after {
    @include left(0);
    @include margin-left(-($baseline-v));
  }
}
