.ui-collapsible {
  --collapsible-anim-duration: 0.3s;
  --collapsible-pad: 12px;

  box-sizing: border-box;
  position: relative;
  display: flex;

  &.left {
    flex-direction: row;
    --collapsible-icon-angle: 90deg;
  }
  &.right {
    flex-direction: row-reverse;
    --collapsible-icon-angle: 270deg;
  }
  &.top {
    flex-direction: column;
    --collapsible-icon-angle: 180deg;
  }
  &.bottom {
    flex-direction: column-reverse;
    --collapsible-icon-angle: 0deg;
  }


  & > .ui-collapsible-trigger {
    & .ui-collapsible-trigger-icon {
      opacity: 0;
      transition: opacity 0.2s ease-out 0.1s
      path {
        transition: transform var(--collapsible-anim-duration) ease-out;
        transform-origin: 12px 12px;
        vector-effect: non-scaling-stroke;
      }
    }

    &:focus {
      outline: none;
    }
  }

  &:hover > .ui-collapsible-trigger > .ui-collapsible-trigger-icon {
    opacity: 1;
  }

  & > .ui-collapsible-content {
    box-sizing: border-box;
    // width: 100%;
    // height: 100%;
    overflow: hidden;

    // display: grid;
    // grid-template-rows: minmax(auto, 1fr);
    // grid-template-columns: minmax(auto, 1fr);
    // align-items: stretch;
    // justify-items: stretch;

    animation-duration: var(--collapsible-anim-duration);
    animation-easing-function: ease-out;
    // animation-fill-mode: forwards;

    & > .ui-collapsible-inner {
      box-sizing: border-box;
    }
  }

  &.left, &.right {
    & > .ui-collapsible-trigger {
      &[data-expanded] .ui-collapsible-trigger-icon path {
        transform: scaleX(1) rotate(var(--collapsible-icon-angle, 0));
      }

      &[data-closed] .ui-collapsible-trigger-icon path {
        transform: scaleX(-1) rotate(var(--collapsible-icon-angle, 0));
      }
    }

    & > .ui-collapsible-content {
      & > .ui-collapsible-inner {
        // min-width: var(--kb-collapsible-content-width);
      }

      &[data-closed] {
        animation-name: collapsible_horizontal_close;
        width: var(--kb-collapsible-content-width);
        min-width: 0 !important;

        & > .ui-collapsible-inner {
          animation: collapsible_inner_freeze var(--collapsible-anim-duration) ease-out;
        }
      }

      &[data-expanded] {
        animation-name: collapsible_horizontal_open;

        & > .ui-collapsible-inner {
          animation: collapsible_inner_freeze var(--collapsible-anim-duration) ease-out;
        }
      }
    }
  }

  &.left {
    & > .ui-collapsible-content {
      align-items: flex-end;
    }
  }

  &.right {}

  &.top, &.bottom {
    & > .ui-collapsible-trigger {
      & .ui-collapsible-trigger-icon path {
        transform: scaleY(1) rotate(var(--collapsible-icon-angle, 0));
      }

      &[data-closed] .ui-collapsible-trigger-icon path {
        transform: scaleY(-1) rotate(var(--collapsible-icon-angle, 0));
      }
    }

    & > .ui-collapsible-content {
      &[data-closed] {
        height: var(--kb-collapsible-content-height);
        animation-name: collapsible_vertical_close;
      }

      &[data-expanded] {
        animation-name: collapsible_vertical_open;

        & > .ui-collapsible-inner {
          // min-height: var(--kb-collapsible-content-height);
        }
      }
    }
  }

  &.top {
    & > .ui-collapsible-content {
      justify-content: flex-end;
    }
  }

  &.bottom {}
}

@keyframes collapsible_horizontal_close {
  from {
    width: var(--kb-collapsible-content-width);
  }
  to {
    width: 0;
    min-width: 0;
  }
}

@keyframes collapsible_horizontal_open {
  from {
    width: 0;
    min-width: 0;
  }
  to {
    width: var(--kb-collapsible-content-width);
  }
}

@keyframes collapsible_vertical_close {
  from {
    height: var(--kb-collapsible-content-height);
  }
  to {
    height: 0;
    min-height: 0;
  }
}

@keyframes collapsible_vertical_open {
  from {
    height: 0;
    min-height: 0;
  }
  to {
    height: var(--kb-collapsible-content-height);
  }
}

@keyframes collapsible_inner_freeze {
  from {
    height: var(--kb-collapsible-content-height);
    width: var(--kb-collapsible-content-width);
  }
  to {
    height: var(--kb-collapsible-content-height);
    width: var(--kb-collapsible-content-width);
  }
}
