/**
 * AppBuckets UI
 *
 * _Accordions @ src/styles/collections/_accordions.scss
 *
 * Defined at 20 gen 2021
 * Copyright Marco Cavanna • 2021
 *
 * ---
 *
 *
 */


/******
    Base Accordions Styling
******/
.accordions > .collapsable {
  background-color: $accordions-base-background;
  margin: $accordions-closed-vertical-margins 0;
  @include smoothShadow(0);

  transition: margin $transition-ease $transition-duration,
  box-shadow $transition-ease $transition-duration;

  &:first-child,
  &:first-child.closed > .trigger,
  &.previous-opened,
  &.previous-opened > .trigger,
  &.opened,
  &.opened > .trigger {
    border-top-left-radius: $accordions-border-radius;
    border-top-right-radius: $accordions-border-radius;
  }

  &:last-child,
  &:last-child.closed > .trigger,
  &.next-opened,
  &.next-opened:not(.opened) > .trigger,
  &.opened {
    border-bottom-left-radius: $accordions-border-radius;
    border-bottom-right-radius: $accordions-border-radius;
  }

  &.opened {
    margin: $accordions-opened-vertical-margins 0;
    @include smoothShadow($accordions-opened-elevation);
  }
}

/******
    Disabled Style
******/
.accordions > .disabled.collapsable {
  > .trigger {
    cursor: not-allowed;
  }

  > .trigger > .accordion-trigger > *,
  > .content {
    opacity: $disabled-element-opacity;
  }
}


/******
    Trigger Styling
******/
.accordions > .collapsable > .trigger {
  padding: 0 $accordions-padding;
  background-color: transparent;

  > .accordion-trigger {
    padding: $accordions-padding 0;
  }

  // ----
  //  Header Styling
  // ----
  .header {
    padding-left: $accordions-padding * .5;
    margin-bottom: 0;

    .header-content,
    .header-icon {
      font-size: $accordions-trigger-font-size;
    }
  }

  // ----
  //  Icon Styling
  // ----
  .icon {
    transition: transform $transition-ease $transition-duration;
  }
}

.accordions > .collapsable:not(.disabled) > .trigger {
  cursor: pointer;

  @include hover {
    transition: background-color $transition-ease $transition-duration;

    &:hover {
      background-color: $accordions-trigger-hover-background;
    }
  }
}


/******
    Trigger Dividers
******/
.accordions > .collapsable > .trigger > .accordion-trigger {
  border-bottom-color: $accordions-trigger-divider-color;
  border-bottom-style: $accordions-trigger-divider-style;
  border-bottom-width: $accordions-trigger-divider-width;
}

.accordions > .collapsable.next-opened > .trigger > .accordion-trigger,
.accordions > .collapsable:last-child > .trigger > .accordion-trigger, {
  border-bottom-color: transparent;
}

.accordions > .opened.collapsable > .trigger > .accordion-trigger {
  border-bottom-color: $accordions-trigger-divider-color !important;
}


/******
    Content Styling
******/
.accordions > .collapsable > .content > .accordion-content {
  padding: $accordions-padding $accordions-padding * 1.5;
}