.graph-explorer-accordion {
  flex: auto;
  display: flex;
  height: 100%;
  width: 100%;

  &--scrollable {
    overflow: auto;
  }

  &--vertical {
    flex-direction: column;
  }

  &--vertical:not(&--resizing) > .graph-explorer-accordion-item {
    transition: height 0.3s ease-in-out;
  }
}

.graph-explorer-accordion-item {
  display: flex;
  position: relative;
  flex: auto;

  &--resizing > &__handle, &__handle:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  &--vertical {
    border-top: 1px solid var(--ge-border);

    &:first-child {
      border-top-width: 0;
    }
  }

  &--horizontal {
    border-right: 1px solid var(--ge-border);

    &:last-child {
      border-right-width: 0;
    }
  }

  &__handle {
    position: absolute;
    z-index: 2;
  }

  &__handle-vertical {
    height: 5px;
    bottom: -2.5px;
    left: 0;
    width: 100%;
    cursor: ns-resize;
  }

  &__handle-horizontal {
    height: 100%;
    top: 0;
    right: -2.5px;
    width: 5px;
    cursor: ew-resize;
  }

  &__handle-btn {
    background: var(--ge-surface);
    border: 2px solid var(--ge-accent);
    box-shadow: var(--ge-shadow-sm);
    border-radius: 10px;
    cursor: pointer;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    z-index: 20;
    transition: 0.3s;

    &::before {
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      height: 8px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -4px;
      margin-left: -4px;
      width: 8px;
      transition: background 0.3s;
    }

    &:hover {
      background: var(--ge-accent);
    }
  }

  &__handle-btn-left {
    left: 100%;
    margin-left: -10px;
    &:before { background-image: url("../../images/arrow-left.png"); }
    &:hover:before { background-image: url("../../images/arrow-left1.png"); }
  }

  &__handle-btn-right {
    right: 100%;
    margin-right: -10px;
    &:before { background-image: url("../../images/arrow-right.png"); }
    &:hover:before { background-image: url("../../images/arrow-right1.png"); }
  }

  &--collapsed &__handle-btn:before {
    transform: rotate(180deg);
  }

  &__inner {
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  &__body {
    flex: 1 1 0px; // IE 11 requires a unit to be added to the third argument
    display: flex;
    flex-direction: column;
    background: var(--ge-surface);
  }

  &__header {
    padding: 11px 12px 11px 24px;
    position: relative;

    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ge-text-muted);
    background: var(--ge-surface-2);
    border-bottom: 1px solid var(--ge-border);
    cursor: pointer;
    transition: background var(--ge-transition), color var(--ge-transition);
    /* unselectable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:hover {
      background: var(--ge-surface-3);
      color: var(--ge-text);
    }

    &:before {
      border-top: 5px solid var(--ge-text-subtle);
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      content: "";
      position: absolute;
      top: 50%;
      left: 9px;
      margin-top: -2px;

      transition: transform 0.15s ease;
    }
  }

  &--collapsed &__header:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  &--collapsed &__body {
    display: none;
  }
}