@import '../../../../bootstrap/less/dropdowns';

//
// Dropdown menus
// --------------------------------------------------

// When you want to use a dropdown for more than just a menu…
.dropdown-menu .dropdown-content {
  padding: floor(@grid-gutter-width/2);
  .dropdown-header {
    padding-left: 0;
    padding-right: 0;
  }
}


//
// Collapse heading and icon
// --------------------------------------------------

// Collapse arrow icon - changes state when collapsed
.collapse-icon {
  .transition(transform .2s ease-out);
  margin-right: .25em;
  * + & {
    margin-left: .25em;
    margin-right: 0;
  }
}

// Plus icon - perhaps needs to be in seperate file (globals > icons)
.i-plus {
  display: inline-block;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: 200;
  line-height: .65em;
  vertical-align: -10%;
  &.collapse-icon {
    .transform-origin(53% 60%); // Center point of sans-serif '+'
    .rotate(135deg);
  }
}

// This is backwards because the 'collapsed' class is removed when expanded
// Use the icon you wish to appear when expanded.
.collapsed .collapse-icon {
  &.fa-angle-down {
    .rotate(-90deg);
  }
  &.fa-angle-up {
    .rotate(180deg);
    &.collapse-icon-below {
      .rotate(90deg);
    }
  }
  &.i-plus {
    .rotate(0deg);
  }
}

// Fading collapse headings - low-lighted when collapsed
.collapse-heading {
  &.collapsed:not(:hover):not(:focus) {
    .opacity(alpha(@text-faded));
  }
  &.collapsed,
  &:hover,
  &:focus {
    text-decoration: none;
    .collapse-icon {
      color: inherit;
    }
  }
}

// Toggle different content for collapsed and expanded 'collapse' triggers
// E.g. "Show more" and "Show less"
.collapsed .collapsed-text,
.expanded-text {
  display: inline;
}
.collapsed .expanded-text,
.collapsed-text {
  display: none;
}