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

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

/// @prop - Icon for the detail arrow
$item-ios-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-ios-collapse-detail-push-color}'/></svg>" !default;

// IOS Item Collapse
// --------------------------------------------------

.ion-item-collapse-group {
  .item-collapse {
    .ion-item {
      .item-inner {
        position: relative;
        padding-right: 32px;
      }
    }
  }
  
  .collapse-ios {
    .item-ios {
      &:active {
        background-color: $list-ios-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-ios-collapse-detail-push-svg, true);
    }
    
    .item-collapse-inner {
      padding-left: 40px;
      overflow: hidden;
    }
  }
  
  .collapse-ios.item-collapse-open {
    .item-arrow {
      transform: rotate(90deg);
    }
  }
}

.ion-item-collapse-group > .collapse-ios:last-child {
  border-bottom: 1px solid $list-ios-border-color;
  
  .item-block {
    .item-inner {
      border-bottom: 0;
    }
  }
}

.ion-item-collapse-group > .collapse-ios.item-collapse-open:last-child {
  //border-bottom: 0;
  
  .item-block {
    .item-inner {
      border-bottom: 1px solid $list-ios-border-color;
    }
  }
}