@use '../../abstract';

.cds-expander {
  $this: &;

  &__inner {
    border-radius: 12px;
    border: 1px solid #eaecf0;
  }

  &__summery {
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
  }

  &.is-active #{$this}__trigger {
    transform: rotate(180deg);
  }

  &__content {
    border-top: 1px solid #eaecf0;
    padding: 24px 16px;
  }

  &__hint-text {
    margin-block-start: 6px;
    color: var(--primary-red-600);
    font-size: var(--font-size-1);
  }
}