@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" as *;
@use "../../base/accordion";

// adduse

.dx-accordion {
  background-color: $accordion-background-color;
  color: $accordion-color;
  margin: 3px 3px 5px 3px;
}

.dx-accordion-item {
  background-color: $accordion-item-bg;
  box-shadow: $accordion-item-shadow;
  transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: margin, height;
  border-top: 1px solid $accordion-item-border-color;

  &:first-child {
    border-top: none;
    border-start-start-radius: $accordion-item-border-radius;
    border-start-end-radius: $accordion-item-border-radius;
  }

  &:last-child {
    border-end-start-radius: $accordion-item-border-radius;
    border-end-end-radius: $accordion-item-border-radius;
  }

  &.dx-state-active,
  &.dx-state-focused {
    > .dx-accordion-item-title {
      color: $accordion-title-active-color;
      background-color: $accordion-title-active-bg;
    }
  }

  &.dx-state-hover {
    & > .dx-accordion-item-title {
      background-color: $accordion-item-hover-bg;
    }

    + .dx-accordion-item-closed {
      border-top-color: $accordion-title-hover-border-color;
    }
  }
}

.dx-accordion-item-opened {
  margin-block: $material-accordion-item-opened-margin;
  border-top: none;
  border-radius: $accordion-item-border-radius;

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

  & > .dx-accordion-item-title {
    &::before {
      content: "\f014";
    }
  }

  + .dx-accordion-item {
    border-top: none;
  }
}

.dx-accordion-item-title {
  min-height: $material-accordion-title-height;
  padding: $material-accordion-title-vertical-padding $material-accordion-title-horizontal-padding;
  background-color: $accordion-item-bg;

  &::before {
    content: "\f016";
    position: absolute;
    font-weight: normal;
    font-size: $accordion-title-icon-size;
    inset-inline-end: $material-accordion-title-horizontal-padding;
    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
    line-height: 100%;
  }

  .dx-icon {
    @include dx-icon-sizing($accordion-title-icon-size);
  }
}

.dx-accordion-item-title-caption {
  color: $accordion-title-color;
  font-size: $material-accordion-title-font-size;
  font-weight: 500;
  margin-inline-end: $accordion-title-icon-size;

  .dx-icon {
    @include dx-icon-margin($accordion-title-icon-margin);
  }
}

.dx-state-disabled {
  &.dx-accordion-item {
    opacity: $base-disabled-opacity;
  }
}

.dx-accordion-item-body {
  padding: $material-accordion-body-padding;
}