@import '../settings/variables';
@import '../settings/keyframes';
@import '../tools/mixins/breakpoints';

$cellWidth: 14em;
$totalRowWidth: calc(5 * #{$cellWidth});
$dataRowWidth: calc(4 * #{$cellWidth});
$mobileLabelCellWidth: calc(#{$cellWidth} * 0.6);
$mobileTotalRowWidth: calc(calc(4 * #{$cellWidth}) + #{$mobileLabelCellWidth});
$mobileDataRowWidth: calc(calc(3 * #{$cellWidth}) + #{$mobileLabelCellWidth});

.c-bunker-consumption-calculations-rows {
  &__row {
    display: flex;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0.9375em 0;
    background-color: $color-background-alternative;
    border-radius: 2px;
    width: $mobileTotalRowWidth;

    @include media-breakpoint-up(sm) {
      width: $totalRowWidth;
    }

    &--row-total {
      padding: 0;
    }

    &--row-label {
      padding: 0;
      background-color: $color-background;
    }

    &--no-background-color {
      background-color: transparent;
    }

    &--total {
      font-family: $font-maersk-text;
      font-size: $font-size-medium;
      color: $color-dark-grey;
    }

    &--padded {
      margin-left: calc(#{$mobileLabelCellWidth});

      @include media-breakpoint-up(sm) {
        margin-left: calc(#{$cellWidth});
      }
    }

    &--summary {
      width: $mobileTotalRowWidth;
      display: flex;
      justify-content: space-between;
      padding: 1em 2em 1em 1em;
      margin: 0;

      @include media-breakpoint-up(sm) {
        width: $totalRowWidth;
      }
    }

    &--cell-sized {
      width: $mobileLabelCellWidth;

      @include media-breakpoint-up(sm) {
        width: calc(#{$cellWidth} + 4px);
      }
    }

    &--main-data {
      width: $dataRowWidth;
    }
    &--total {
      background-color: transparent;
      width: $mobileTotalRowWidth;
      margin: 0;

      @include media-breakpoint-up(sm) {
        width: $totalRowWidth;
      }
    }
  }

  &__cell {
    padding: 0 2em 0 1em;
    min-width: $cellWidth;
    width: $cellWidth;

    &--row-labels {
      padding-left: 1em;
      width: calc(#{$mobileLabelCellWidth} + 4px);
      min-width: calc(#{$mobileLabelCellWidth} + 4px);
      margin: 0;

      @include media-breakpoint-up(sm) {
        width: calc(#{$cellWidth} + 4px);
        min-width: $cellWidth;
      }
    }

    &--data {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  &__cell p {
    margin-bottom: 0;
    line-height: $base-font-size;
  }

  &__data {
    &--text {
      font-size: $font-size-caption;
      height: calc(#{$base-font-size} + 2px);
      font-weight: $font-weight-normal;
    }

    &--sub-text {
      font-size: 0.75rem;
      color: $color-dark-grey;
      margin-left: 6px;
    }

    &--summary {
      line-height: $base-font-size;
      font-size: 1.125em;
      margin-right: 0.125em;
      color: $color-negative;
      font-weight: $font-weight-bold;
    }

    &--summary-suffix {
      font-size: $font-size-medium;
      line-height: $base-font-size;
      margin-bottom: 1px;
      color: $color-negative;
      font-weight: $font-weight-bold;
    }

    &--positive {
      color: $color-positive;
    }

    &--additional-data {
      color: $color-dark-grey;
      font-size: $font-size-medium;
      line-height: $base-font-size;
      margin-left: $margin-small;
    }
  }

  &__label {
    &--summary {
      margin: 0;
      font-size: 1.125em;
      line-height: 1.25rem;
      font-weight: $font-weight-bold;
    }

    &--column {
      font-family: $font-maersk-headline;
      font-size: $font-size-medium;
      line-height: $base-font-size;
      font-weight: $font-weight-bold;
      text-align: right;
    }

    &--column-suffix {
      font-size: $font-size-medium;
      color: $color-dark-grey;
      line-height: $base-font-size;
      font-weight: $font-weight-normal;
    }

    &--row {
      font-family: $font-maersk-headline;
      font-size: $font-size-medium;
      height: calc(#{$base-font-size} + 2px);
      line-height: $base-font-size;
      font-weight: $font-weight-bold;
    }
  }
}