/* ==========================================================================
 * Collapsible
 * ========================================================================== */

.mds-c-collapsible-content-list {
  position: relative;

  &.mds-is-droppable {
    background-color: var(--mds-t-background-color--accent-muted);
    box-shadow: calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted),
      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted);
    cursor: grabbing;
  }

  &::before {
    content: '';
    display: block;
    height: 100%;
    left: calc(var(--mds-d-spacing--xxl) * -1);
    position: absolute;
    top: 0;
    width: var(--mds-d-spacing--xxl);
  }
}

.mds-c-collapsible-content {
  --mds-v-collapsible-content__border-color: var(
    --mds-t-border-color--secondary
  );
  --mds-v-collapsible-content__color--secondary: var(
    --mds-t-text-color--secondary
  );
  --mds-v-collapsible-content__color--accent: var(--mds-t-text-color--accent);
  --mds-v-collapsible-content__tab-outline-color: var(
    --mds-t-text-color--accent
  );
  --mds-v-collapsible-content__tab-spacing: var(--mds-d-spacing--xs);

  position: relative;
  width: 100%;

  &:not(:first-of-type) {
    border-top: 1px solid var(--mds-v-collapsible-content__border-color);
  }

  &.mds-is-dragging::before {
    cursor: grabbing;
  }

  &.mds-is-draggable,
  &.mds-is-dragging {
    &::before {
      content: '';
      cursor: grab;
      display: none;
      height: 100%;
      left: calc(var(--mds-d-spacing--xl) * -1);
      position: absolute;
      top: 0;
      width: var(--mds-d-spacing--xl);

      .mds-c-collapsible-content-list:hover & {
        background-image: svg-load(
          '../../momentum-icons/dist/svg/dots-drag.svg',
          fill: $color-ui--5
        );
        background-position: center;
        background-size: var(--mds-d-font-size--lg);
        display: block;
      }

      .mds-c-collapsible-content-list.mds-is-droppable & {
        border-top: 0;
      }
    }
  }
}

.mds-c-collapsible-content__content {
  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  padding: var(--mds-d-spacing--lg) var(--mds-d-spacing--sm);

  .mds-c-collapsible-content.mds-is-dragging & {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent),
      var(--mds-d-elevation--4);
  }
}

.mds-c-collapsible-content__button {
  display: block;
  line-height: 1;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 1;

  &:hover {
    cursor: pointer;
  }

  &:not(:last-of-type) {
    margin-bottom: 0;
  }

  &:focus-visible {
    border-color: transparent;
    outline: 2px solid var(--mds-v-collapsible-content__tab-outline-color);
    z-index: 2;
  }
}

.mds-c-collapsible-content__button-section {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.mds-c-collapsible-content__title {
  @mixin mds-m-heading--size-lg;

  &--truncate {
    @mixin mds-m-text-overflow-ellipsis;
  }
}

.mds-c-collapsible-content__subtitle {
  @mixin mds-m-heading--size-med;

  color: var(--mds-v-collapsible-content__color--secondary);
  font-weight: var(--mds-d-font-weight--normal);
}

.mds-c-collapsible-content__label {
  @mixin mds-m-heading--size-med;

  color: var(--mds-v-collapsible-content__color--secondary);
  font-weight: var(--mds-d-font-weight--medium);
  margin-top: var(--mds-d-spacing--med);
}

.mds-c-collapsible-content__panel {
  line-height: 1;
  transition: height 300ms cubic-bezier(0.65, 0.05, 0.36, 1),
    opacity 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53),
    padding-top 100ms ease-in-out;

  &[aria-hidden='true'][aria-expanded='false'] {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
  }

  &[aria-hidden='false'][aria-expanded='true'] {
    opacity: 1;
    overflow: initial;
    padding-top: var(--mds-d-spacing--lg);
  }
}