@import "../node_modules/delite/css/includes";

.d-accordion {
  .box-sizing(border-box);
  position: relative;
  overflow: auto;
  .display-flex();
  align-items: stretch;
  .flex-direction-column();
  // Note that borders are on accordion child elements rather than on the accordion itself.
}

// Note: there used to be some code here for rounded borders on the first and last elements,
// but it's tricky to get right because you want the rounded border on the last *visible* element,
// which may be a panel (if the last accordion panel is open), or it may be a header
// (if the last panel is closed).

// Styling for panel headers.
.d-accordion-header {
  display: flex;
  border: 2px solid;
  padding: 10px 15px;

  font-weight: bold;
  .border-radius(0);
  border-color: @panel-inner-border;
  color: @panel-default-text;
  background-color: @panel-default-heading-bg;

  // Button to open/close the dropdown.
  // Fills the entire header except when header contains additional controls.
  // Override default <button> styles and instead inherit styling from d-accordion-header.
  .d-header-label-button {
    flex: 1;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
  }

  &:hover {
    background-color: darken(@panel-default-heading-bg, 8%);
    border-color: darken(@panel-inner-border, 12%);
  }

  &.d-open {
    background-color: @component-active-bg;
    border-color: @component-active-bg;
    border-bottom-width: 1px;
    color: @component-active-color;

    &:hover {
      background-color: lighten(@component-active-bg, 12%);
      border-color: darken(@component-active-bg, 10%);
    }
  }
}

// Styling for accordion panels (i.e. the content).
.d-accordion > [role=region] {
  border: solid 2px @panel-inner-border;
  border-top: none;
  .border-radius(0);	// override styling for <d-panel>
}

[role=region].d-accordion-open-panel {
  border-color: @component-active-bg;
  .flex(1);
}

// CSS animation to slide open an accordion panel.
@keyframes d-accordion-open-animation {
  from {.flex(0.0001);}
  to {.flex(1);}
}
@-webkit-keyframes d-accordion-open-animation {
  from {.flex(0.0001);}
  to {.flex(1);}
}
[role=region].d-accordion-open-animation {
  animation-name: d-accordion-open-animation;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  -webkit-animation-name: d-accordion-open-animation;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  overflow: hidden; // to avoid scroll bar on animation
}

// CSS animation to slide closed an accordion panel.
@keyframes d-accordion-close-animation {
  from {.flex(1);}
  to {.flex(0.0001);}
}
@-webkit-keyframes d-accordion-close-animation {
  from {.flex(1);}
  to {.flex(0.0001);}
}
[role=region].d-accordion-close-animation {
  animation-name: d-accordion-close-animation;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  -webkit-animation-name: d-accordion-close-animation;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  overflow: hidden; // to avoid scroll bar on animation
}