exadel-inc/esl

@import (reference) './variables.less';
 
.esl-d-accordion {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
 
  border: 1px solid @secondary-blue;
  border-radius: 0.3rem;
 
  margin-bottom: 0.5em;
 
  &-body {
    flex: 1 1 auto;
    padding: 1.25rem;
  }
 
  &-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
 
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.4s ease-in-out;
 
    &:first-child {
      border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }
 
    &-arrow {
      position: relative;
    }
    &-arrow::after {
      content: '';
 
      position: absolute;
      top: 20px;
      right: 1.25rem;
      width: 7px;
      height: 7px;
 
      border-left: 2px solid @body-fg;
      border-top: 2px solid @body-fg;
 
      transform: rotate(225deg);
      transform-origin: center;
      transition:
        transform 0.5s ease-in-out,
        top 0.5s ease-in-out;
    }
 
    &[active] {
      color: @primary-blue;
      border-bottom-color: @secondary-blue;
    }
    &[active]&-arrow::after {
      transform: rotate(45deg);
      border-color: @primary-blue;
    }
  }
}