@collapse-panel-prefix: ~'@{icecream-prefix}-collapse-panel';

.@{collapse-panel-prefix} {
  .extendBaseEnhanced();
  border: @icecream-border-width solid @icecream-color-grey-5;
  background-color: @icecream-color-grey-2;

  & + & {
    border-top: none;
  }

  &-active &-header {
    border-bottom: @icecream-border-width solid @icecream-color-grey-5;
  }

  &-header {
    display: flex;
    justify-content: space-between;
    padding: @icecream-gap-md - @icecream-border-width 18px;
    cursor: pointer;

    &-title, &-title-wrapper {
      display: flex;
    }

    &-icon {
      height: @icecream-font-size-md;
      margin: auto @icecream-gap-sm auto 0;

      svg {
        vertical-align: 0.125em;
        transition: @icecream-transitions;
      }
    }

    &-extra {
      display: flex;
      align-items: center;
      cursor: default;
    }
  }

  &-active &-header-icon svg {
    transform: rotateZ(90deg);
  }

  &-motion {
    transition: height @icecream-transitions, opacity @icecream-transitions;
  }

  &-leaved {
    display: none;
  }

  &-body{
    padding: @icecream-gap-md;
    background-color: @icecream-white;

    &-wrapper {
      overflow: hidden;
    }
  }
}