.sheet-body .Accordion {
  position: absolute;
  top: -20px;
  right: -32px;
  bottom: -32px;
  left: -32px;
  background: #eef1f3;

  > .Label {
    background: #f8f8f8;
    padding: 0 32px;
  }

  > .Content {
    padding: 0 32px;

    > *:first-child {
      margin-top: 32px;
    }

    > *:last-child {
      margin-bottom: 32px;
    }
  }
}

.Accordion {
  @transition-time: 0.4s;

  display: flex;
  flex-direction: column;
  flex-flow: column;

  .Label {
    display: block;
    position: relative;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #dde3e6;
    border-bottom: 1px solid #dde3e6;
    margin-top: -1px;
    cursor: pointer;

    &:hover {
      color: #000;
      svg {
        fill: #000 !important;
      }
    }

    &:first-child {
      border-top: none;
    }

    svg {
      position: absolute;
      right: 32px;
      top: 50%;
      margin-top: -12px;
      fill: #4a4a4a !important;
      transform: rotate(-90deg);
      transition: transform @transition-time ease-in-out;
    }

    &.active svg {
      transform: rotate(0deg);
    }
  }

  .Content {
    position: relative;
    flex: 0;
    transition: all @transition-time ease-in-out;
    height: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
  }

  .Label.active + .Content {
    flex: 1;
    height: auto;
    max-height: 100%;
    overflow: auto;
  }
}