_epaye-statements.scss

@mixin border-bottom-zero {
  border-bottom-width: 0;
}

@mixin summary-arrow-styles {
  color: $details-link;
  padding: 0 2px;
}

.delegation-banner {
  background-color:$info-bg-color; 
  border-left: 3px solid $govuk-blue;
  padding: 0.6em 1em 0.5em; 
  max-width: 900px;
  float: none;
  clear: both;
  z-index: 999;

  &.panel-indent {
    margin: 0 0 1em 10px;
  }

  .client-list {
    margin-left: 19px;
  }
}

.paye-header > .h1-heading {
  padding: 10px 0 5px 0;
  margin-bottom: 10px;      
}


.statements-balance {
  .balance-message {
    margin: 0;
  }  
  &.alert {
    padding: 0.8em 1em 0.6em 1em;
    margin: 1.5em 0 20px 0;    
  }
  
  &.alert--info {
    position: inherit;
  }
}

.statements-year-message {
  float:left;
  width: 50%;
}

.statements-year-navigation {
  float:right;
  text-align: right;
  width: 50%;
}

.statements-year--text, .statements-year__link {
  &:first-child {
    margin-right: 0.5em
  }
}

// **** STATEMENT TOTALS - annual-statement page
.statements__table--totals {
  border: 2px solid #bfc1c3;
  border-left-width: 0;
  border-right-width: 0;
}

.statements__table__cell--totals {
  font-weight: bold;
  width: 24.4%;
  padding-right: 0;
  text-align: right;
  
  &.totals {
    padding-right: 0;
    text-align: left;
  }

  &.amount-paid {
    width: 26.2%;
  }

  &.balance {
    padding-right: 24px;
  }
}

// **** STATEMENTS - annual-statement page
.wrapper .annual-summaries--group {
  @include border-bottom-zero;
  margin-bottom: 10px;
  
  .statements__table__row:last-child > .statements__table__cell {
    @include border-bottom-zero;
  }   
}

// **** STATEMENTS - account-overview AND annual-statement pages
.annual-summaries--group {
  border-bottom-width: 1px;
  
  .statement__summary--parent {
    // "summary-arrow-styles" mixin at top of file
    @include multi-line-summary-block(22%);
    
    .summary__table {
      @include border-bottom-zero;
      margin: 0;
    }
  }

  .statement__summary {
    @include multi-line-summary-block();
    padding: 0;
  }

  .statement__summary--parent[aria-expanded=true]{
    background-color: $grey-8;
  }
    
  .alert--text {
    color: $alert-bg-red;
  }
  
  .icon--flag {
    background-image: url("../images/statements-flag3.png");
    background-repeat: no-repeat;
    background-position: 3px 4px;
    padding-left: 3px;
    
    &:before {
      content: "\f104";
    }
  }

  .statements__table__cell, .statements__table__head__cell {
    padding-right: 0;
  }
  
  .annual-summaries__header--cell {
    vertical-align: bottom;

    &:first-child {
      padding-left: 21px;
    }

    &:last-child {
      padding-right: 24px;
    }
  }

  .annual-summaries__header--cell,
  .summary__cell {
    text-align: right;
    width: 24.4%;

    &.payments {
      width: 26.2%;
    }
  }
  
  .annual-summaries__cell--group {
    padding: 0;
  }
  
  .details__container {
    padding-top: 10px;
    background-color: $shaded-bg-grey;
  }
  
  .statement__summary {
    margin: 0;
    width: 100%;
    display: block;
  }

  .summary__table {
    @include border-bottom-zero;
    margin: 0;
  }

  .summary__cell {
    @include border-bottom-zero;
    padding: 12px 3px 10px;
  }

  .summary__cell:last-child {
    padding-right: 24px;
  }

  .summary__cell--content {
    color: $grey-0;
    margin-bottom:0.26316em;
    white-space: nowrap;
  }

  .summary__cell--no-content {
    padding-left: 18px;
    white-space: nowrap;
  }
  
  .details__table {
    @include border-bottom-zero;
    margin: 0;
  }

  .details__table__head--item,
  .summary__table__head {
    border-bottom-color: $light-grey;
  }

  .details__table__head__cell--item,
  .details__table__cell--item,
  .summary__table__head__cell,
  .summary__table__cell,
  .details__table__cell--total {
    color: $grey-0;
    &:nth-child(even) {
      text-align: right;
      padding-right: 0;
    }
  }
  
  .details__table__cell--content {
    @include border-bottom-zero;
  }
  
  .cell__label--content {
    color: $grey-1;
    display: block;
    @include core-14;
    padding-left: 19px;
  }

  .annual-summaries__row,
  .summary__table__row {
    vertical-align: top;
  }

  .statements__table__head__cell--black {
    color: $black;
  } 
  
  .details__summary--black {
    color:$black;
    text-decoration: underline;
  }
  
  .details__table--content-container {
    @include border-bottom-zero;
  }

  .details__table__cell--content-container {
    @include border-bottom-zero;
    padding: 0 24px;

    .statements__table {
      margin: 0;
      border-bottom-width: 1px;

      .statements__table__cell, .statements__table__head__cell {
        vertical-align: top;
      }

      & > .statements__table__body .statements__table__row:last-child .statements__table__cell {
        border-bottom-width: 1px;
      }
    }

    .details__table--total {
      border-top: 1px solid $light-grey;
      border-bottom: 2px solid $light-grey;
    }
  }
  
  .details__table__cell--total {
    padding: 12px 0 10px;
  }  

  .details__list--notices {
    list-style-type: disc;
    margin: 0.75em;
    max-width: 30em;
  }

  .details__list--notices-item {
    @include core-16();
    margin-bottom: 5px;
  }
}

.summary__table {
  .statements__table__head {
    @include border-bottom-zero;
  }
}

.statement__details--group > .panel-indent > .statements__table {
  @include border-bottom-zero;
  width: 100%;
}

.summary__table--payments {
  width: 59%;
}

// **** SIDEBAR LINKS
.paye-statements {
  .h1-heading {
    margin-bottom: .8em;
  }

  .h2-heading {
    margin-bottom: .25em;
  }

  .h4-heading {
    margin-top: .5em;
    margin-bottom: .25em;
  }
  
  .annual-summaries--group {
    margin-top: 0;
  }
  
  .sidebar-links {
    margin-bottom: 1.6em;
    margin-right: .8em;

    &:first-child {
      margin-top: 3.6em;
    }
  }
  
  .sidebar-links__heading {
    margin: .65em 0 .375em .15em;

    &:first-child {
      margin-top: 0;
    }
  }
  
  .sidebar-links__item {
    border-bottom: 1px solid $border-colour;
    font-size: 19px;
    line-height: 1.25;
    padding: 0.3em 0;
    margin: 0;
    
    &.selected {
      background-color: $govuk-blue;

      .sidebar-links__link {
        color: $white;
        &:hover, &:focus, &:active {
          color: $white;
        }
      }
    }
  }
  
  .sidebar-links__link {
    text-decoration: none;
    padding-left: .25em;
    
    &:hover, &:focus, &:active {
      text-decoration: underline;
    }
  }  
}