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

.c-dashboard-vessel-list-item {
  background-color: $color-background-alternative;
  border-radius: 2px;
  padding-bottom: $gutter-big;
  cursor: pointer;

  &:hover {
    background: #FFFFFF;
    outline: 1px solid #E3E8EC;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.05);
  }

  @include media-breakpoint-up(xl, true) {
    padding-bottom: 0;
  }

  &__content {
    @include make-col(12, $columns-count);
    font-size: $base-font-size;
    color: $color-labels;
    padding: 0 $gutter-normal 0 $gutter-normal;
    box-sizing: border-box;
    margin-top: $margin-normal;

    @include media-breakpoint-up(sm) {
      padding: 0 $gutter-medium 0 $gutter-medium;
    }

    @include media-breakpoint-up(xl, true) {
      @include make-col(1.5, $columns-count);
      padding: $gutter-normal 0;
      margin-top: 0;
    }

    &--previous-period {
      @include make-col(12, $columns-count);

      @include media-breakpoint-up(xl, true) {
        @include make-col(1.875, $columns-count);
      }
    }

    &--big {
      @include make-col(12, $columns-count);
      margin-top: 0;

      @include media-breakpoint-up(xl, true) {
        @include make-col(4.5, $columns-count);
      }
    }

    &--main {
      flex-direction: column;

      @include media-breakpoint-up(xl, true) {
        flex-direction: row;
      }
    }
  }

  &__image {
    width: 80px;
    min-width: 80px;
    height: 80px;
    margin-top: $margin-small;
    margin-left: 0;
    position: relative;

    @include media-breakpoint-up(xl, true) {
      width: 102px;
      min-width: 102px;
      height: 102px;
      margin-top: 0;
      margin-left: $margin-medium;
    }
  }

  &__details {
    margin: 0.125rem 0;

    &--small {
      border-right: 1px solid $color-secondary;
      margin-right: $margin-small;
      padding-right: $gutter-small;

      &:last-of-type {
        border-right: none;
      }

      @include media-breakpoint-up(xl, true) {
        line-height: 1.25;
        border-right: none;
      }
    }

  }

  &--separated {
    border-right: none;
    border-bottom: 1px solid $color-primary;
    padding-bottom: $gutter-normal;

    @include media-breakpoint-up(xl, true) {
      margin-right: $margin-big;
      border-right: 1px solid $color-primary;
      border-bottom: none;
      padding-bottom: 0;
      padding-right: $gutter-normal;
    }
  }

  &__wrapped-details {
    flex-direction: row;

    @include media-breakpoint-up(xl, true) {
      flex-direction: column;
    }
  }

  &__compare {
    color: $color-increase;
    font-weight: $font-weight-bold;

    &:first-of-type {
      margin-top: 0;
    }

    &--bad {
      color: $color-negative;
    }

    &--small {
      font-size: $font-size-medium;
      font-weight: $font-weight-normal;
      margin-bottom: $hairline;
    }

    &--not-available {
      color: rgba(0, 0, 0, 0.12);
    }
  }

  &__compare-container {
    margin-top: $margin-small;
  }

  &__label {
    margin-bottom: $hairline;
    display: initial;

    @include media-breakpoint-up(xl, true) {
      margin-bottom: 0;
      display: none;
    }
  }

  &__dynamic-wrap-item {
    flex-wrap: nowrap;

    @include media-breakpoint-up(xl, true) {
      flex-wrap: wrap;
    }
  }

  &--badge {
    margin-top: -0.25em;
  }
}