@import "../ui.vars.less";

sc-list {

  &[inset] {
    border: 1px solid @scTertiary;
    border-radius: @buttonRadius;
  }

  &[dense] {
    sc-list-row {
      min-height: 48px;
    }
  }

  &[more-dense] {
    sc-list-row {
      min-height: 28px;
    }
  }
}

sc-list-row {
  padding: 0 12px;
  min-height: 68px;
  opacity: 1;

  /*
  // ng-hide ng-show animations
  .ng-hide {
      opacity: 0;
  }

  .ng-hide-remove { //&.ng-hide-add, is removed to simulate switching to list items. Otherwise they'll push each other out while animating.
      transition: opacity linear 0.3s;
  }
  */

  &[hover] {
    &:hover {
      background-color: #e6e6e6;
      transition: .2s;
    }
  }

  &[disabled] {
    sc-list-item {
      cursor: not-allowed !important;
    }

    &[hover] {
      &:hover {
        background-color: @appWhite;
      }
    }
  }

  &[selected] {
    background-color: @scActionUltraLight;

    h1, h2, h3, h4, h5, h6, p, span {
      color: @scAction
    }
  }

  &[no-padding] {
    sc-list-item:nth-last-of-type(1) {
      padding-right: 0px;
    }
  }

  &[dense] {
    min-height: 48px;
  }

  &[more-dense] {
    min-height: 28px;
  }


  &[padding-left] {
    padding-left: 14px;
  }

  &[padding-right] {
    padding-right: 14px;
  }

  sc-list-item:nth-last-of-type(1) {
    padding-right: 0;
  }

  &[removed] {
    color: @scAction;
    background-color: lighten(@scAction, 50%);
    animation: fade-in 0.3s linear forwards;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  &[padding] {
    //not sure about this one yet...
    padding: 12px;
  }

  &[more-padding] {
    padding: 16px 24px;
  }

  @media only screen and (max-width: @mobile-landscape) {
    padding: 0 8px;

    &[padding-left] {
      padding-left: 14px;
    }

    &[padding-right] {
      padding-right: 14px;
    }

    &[more-padding] {
      padding: 16px;
    }
  }

  &[panel] {
    border-radius: 3px;
    padding: 10px;
    border-color: #e9e9e9;
    box-shadow: 1px 1px 8px #c7c3c3;
    margin-bottom: 10px;
  }
}

sc-list-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  min-height: 54px;
  padding: 0 12px;
  background-color: @scTertiary;
  border-radius: 4px 4px 0px 0px;

  sc-list-item:nth-last-of-type(1) {
    padding-right: 0;
  }

  @media only screen and (max-width: @mobile-landscape) {
    padding: 0px 8px;
  }

  &[no-background] {
    background: none;
  }

  &[sub-header] {
    border-radius: 0;
  }

  &[dense] {
    min-height: 48px;
  }

  &[more-dense] {
    min-height: 28px;
  }

  &[no-padding] {
    sc-list-item:nth-last-of-type(1) {
      padding-right: 12px;
    }
  }

}