collapsible {
  display: block;

  .collapsible-extra-icon {

  }

  .collapsible-title {
    cursor: pointer;
    user-select: none;

    &:focus {
      outline: none;
    }

    .collapsible-expand-icon {
      transition: all $transition-standard;
    }

    .md-button {
      margin-left: auto;
      $this-button-size: 34px;
      padding: 0;
      height: $this-button-size;
      width: $this-button-size;
      min-width: $this-button-size;
      min-height: $this-button-size;

      // this fixes the original link button icon for some reason
      line-height: $this-button-size + -1;
    }
  }

  &.is-expanded {
    .collapsible-expand-icon {
      transform: rotate(-180deg);
    }
  }

  .collapsible-panel {
    height: auto;
    display: block;

    // make sure we don't produce clunky animations
    padding: 0 !important;
    margin: 0 !important;

    &.ng-animate {
      overflow: hidden !important;

      md-input-container,
      md-input-container * {
        transition: none !important;
        animation-duration: 0s !important;
      }
    }
  }
}