@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$card-prefix: 'dk-card';

.#{$card-prefix} {
  @include reset-component();
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
  border: $card-border-width solid $card-border-color;
  border-radius: $card-border-radius;

  &-header {
    padding: $card-padding-y $card-padding-x;
    margin-bottom: 0;
    background: $card-header-bg;
    transition: all 0.35s ease;

    &-collapse {
      cursor: pointer;

      &:hover,
      &-visible {
        background: $light;
      }
    }

    &-icon {
      position: relative;
      left: -4px;
      font-size: $select-icon-size;
      user-select: none;
      transform: rotate(0deg);
      transition: transform 200ms linear;

      &-visible {
        transform: rotate(90deg);
      }
    }
  }

  &-body {
    flex: 1 1 auto;
    padding: $card-padding-y $card-padding-x;
    border-top: $card-border-width solid $card-border-color;

    &-collapse {
      overflow: hidden;
      height: 0;
      transition: height 0.35s ease;

      &-visible,
      &-exit,
      &-enter-done {
        height: auto;
      }

      &-exit-done {
        height: 0;
      }

      &-enter {
        height: 0;
      }
    }
  }

  &-footer {
    padding: $card-padding-y $card-padding-x;
    border-top: $card-border-width solid $card-border-color;
    border-radius: $card-border-radius $card-border-radius 0 0;
  }

  > div:first-child {
    border-radius: $card-border-radius $card-border-radius 0 0;
  }
  > div:last-child {
    border-radius: 0 0 $card-border-radius $card-border-radius;
  }

  &-accordion {
    overflow: hidden;
  }
}

.#{$card-prefix}-collapse {
  @include reset-component();

  .#{$card-prefix} {
    border-radius: 0;

    &:nth-of-type(n+1) {
      margin-top: -1px;
    }

    &:first-child {
      border-radius: $card-border-radius $card-border-radius 0 0;
    }

    &:last-child {
      border-radius: 0 0 $card-border-radius $card-border-radius;
    }
  }
}