.sui-o-accordion {
  $this: &;

  &__title {
    cursor: pointer;
    padding: $sui-space-sm $sui-space-xxl $sui-space-sm $sui-space-sm;
    border-bottom: $sui-size-border solid $sui-color-border;
    position: relative;

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      width: rem(10);
      height: rem(2);
      background-color: $sui-color-brand-denim-700;
      transition: all 0.2s $sui-curve-easeInOutQuint;
    }

    &::before {
      transform: rotate(-45deg);
      right: rem(15);
    }

    &::after {
      transform: rotate(45deg);
      right: rem(21);
    }
  }

  &__body {
    padding: $sui-space-md;
    opacity: 0;
    display: none;

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

    & > :last-child {
      margin-bottom: 0;
    }
  }

  &__item {
    &.as--open {
      & > #{$this}__title {
        &::before {
          transform: rotate(45deg);
        }

        &::after {
          transform: rotate(-45deg);
        }
      }

      & > #{$this}__body {
        display: block;
        animation: fadein 0.35s normal forwards;
      }
    }

    &.as--sm {
      & > #{$this}__title {
        font-size: $sui-font-size-ms;
        line-height: $sui-font-size-ms;
        padding: $sui-space-sm $sui-space-xxl - $sui-space-sm $sui-space-sm $sui-space-sm;

        &::before,
        &::after {
          width: rem(8);
        }

        &::before {
          right: rem(14);
        }

        &::after {
          right: rem(19);
        }
      }
    }

    &.as--lg {
      & > #{$this}__title {
        font-size: $sui-font-size-ml;
        line-height: $sui-font-size-ml;
        padding: $sui-space-md $sui-space-xxl + $sui-space-sm $sui-space-md $sui-space-md;

        &::before,
        &::after {
          width: rem(14);
        }

        &::before {
          right: rem(17);
        }

        &::after {
          right: rem(26);
        }
      }
    }
  }
}