.mds-c-expansion-panels {
  position: relative;

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

  & > * {
    margin-top: var(--mds-d-spacing--xl);

    &:first-child {
      margin-top: 0;
    }
  }
}

.mds-c-expansion-panel {
  --mds-t-background-color: var(--mds-t-background-color--primary);
  --mds-v-expansion-panel__border-color: var(--mds-t-border-color--secondary);
  --mds-v-expansion-panel--padding-sm: var(--mds-d-spacing--lg);
  --mds-v-expansion-panel--padding-med: var(--mds-d-spacing--xl);
  --mds-v-expansion-panel--padding-lg: var(--mds-d-spacing--xxl);

  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  box-shadow: 0 0 0 1px var(--mds-v-expansion-panel__border-color) inset;
  position: relative;

  @each $padding in (sm, med, lg) {
    &--padding-$(padding) {
      & > .mds-c-expansion-panel__info {
        padding: var(--mds-v-expansion-panel--padding-$(padding));
      }

      & .mds-c-expander-wrapper__inner > * {
        padding: var(--mds-v-expansion-panel--padding-$(padding));
      }
    }
  }

  &__expander {
    height: 0;
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    & > .mds-c-expander-wrapper {
      display: flex;

      & > .mds-c-expander-wrapper__inner {
        overflow: visible;
        padding-top: 0.25rem;
        width: 100%;

        & > * {
          border-top: 1px solid var(--mds-v-expansion-panel__border-color);
        }
      }
    }
  }

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

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

  &.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-expansion-panel-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-expansion-panel-list.mds-is-droppable & {
        border-top: 0;
      }
    }
  }
}

.mds-c-expansion-panel-content {
  --mds-v-expansion-panel-content--width-sm: 60%;
  --mds-v-expansion-panel-content--width-med: 80%;
  --mds-v-expansion-panel-content--width-full: 100%;

  align-items: center;
  display: flex;
  flex-direction: column;

  @each $width in (sm, med, full) {
    &--width-$(width) {
      & > * {
        width: var(--mds-v-expansion-panel-content--width-$(width));
      }
    }
  }
}

.mds-c-expansion-panel-list {
  margin-left: calc(var(--mds-d-spacing--xl) * -1);
  overflow: hidden;
  padding-left: var(--mds-d-spacing--xl);

  &.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;
  }
}