@import '../settings/variables';
@import '../tools/mixins/position';

.c-vessel-details-table {
  width: 100%;

  thead {
    tr {
      border-bottom: $hairline solid $color-neutral;
      background: none;
    }
  }

  th {
    font-size: $font-size-medium;
  }

  th, td {
    padding: $gutter-normal 0 $gutter-normal $gutter-small;
    text-align: right;
    &:first-child {
      text-align: left;
    }

    @media print {
      padding: $gutter-normal 0 $gutter-small $gutter-tiny;
    }
  }

  td {
    font-size: $font-size-caption;
  }
  &__row {
    background-image: linear-gradient(to right, $color-labels 10%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 10px 1px;
    background-repeat: repeat-x;

    &:last-child {
      background: none;
    }
  }
  &__operator {
    margin-right: $margin-normal;
    color: $color-primary;
    font-weight: $font-weight-bold;
  }
  &__summary {
    position: relative;
    font-size: $base-font-size;
  }
  &__summary-total {
    @include absolute(auto, auto, 0, 100%);
    word-break: keep-all;
    font-size: $font-size-caption;
    font-weight: $font-weight-normal;
    color: $color-labels;
    white-space: nowrap;
    margin-left: $margin-tiny;
  }

  &__col-width {
    colgroup {
      col {
        width: 12.25%;

        &:first-child {
          width: 35%;
        }
      }
    }

    &--actual-bunker-consumption-upper {
      colgroup {
        col {
          width: 11.667%;

          &:first-child, &:last-child {
            width: 16.667%;
          }
        }
      }
    }

    &--actual-bunker-consumption-lower {
      colgroup {
        col {
          width: 25%;

          &:first-child {
            width: 25%;
          }
        }
      }
    }

    &--optimized-bunker-consumption-upper {
      colgroup {
        col {
          width: 18%;

          &:first-child {
            width: 13%;
          }

          &:nth-of-type(3) {
            width: 15%;
          }
        }
      }
    }

    &--optimized-bunker-consumption-lower {
      colgroup {
        col {
          &:first-child {
            width: 35%;
          }

          &:nth-child(2) {
            width: 25%;
          }

          &:nth-child(3) {
            width: 40%;
          }
        }
      }
    }

    &--payments {
      colgroup {
        col {
          &:first-child {
            width: 20%;
          }

          &:nth-child(2) {
            width: 28%;
          }

          &:nth-child(3) {
            width: 20%;
          }
        }
      }
    }
  }

  &--payments {
    td, th {
      &:nth-child(2), &:nth-child(3) {
        text-align: left;
      }
    }
  }
}