@import "../../../themes/ionic.globals.md";

/// @prop - Color of the detail arrow icon
$item-md-collapse-detail-push-color: $list-md-border-color !default;

/// @prop - Icon for the detail arrow
$item-md-collapse-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-collapse-detail-push-color}'/></svg>" !default;

// Material Design Item Collapse
// --------------------------------------------------

.ion-item-collapse-group {
  .collapse-md {
    .item-md {
      &:active {
        background-color: $list-md-activated-background-color;
        transition-duration: 0ms;
      }
  
      .item-arrow {
        position: absolute;
        top: 50%;
        right: 14px;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 14px 14px;
        transition: all ease 200ms;
    
        @include svg-background-image($item-md-collapse-detail-push-svg, true);
      }
    }

    .item-collapse-inner {
      padding-left: 56px;
      overflow: hidden;
    }
  }

  .collapse-md.item-collapse-open {
    .item-arrow {
      transform: rotate(90deg);
    }
  }
}

.ion-item-collapse-group > .collapse-md:last-child {
  .item-block {
    .item-inner {
      border-bottom: 0;
    }
  }
}

.collapse-md.item-collapse-open:last-child {
  border-bottom: 0;

  .item-block {
    .item-inner {
      border-bottom: $hairlines-width solid $list-md-border-color;
    }
  }

  .item-collapse-inner {
    .item-block:last-child {
      .item-inner {
        border: none;
      }
    }
  }
}