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

.c-vessel-general-info {
  color: $color-secondary-dark;
  font-size: 1em;

  &__name {
    margin: 0;
    @include media-breakpoint-down(lg) {
      font-size: 2em;
    }
  }

  &__spec-column {
    display: block;
  
    &-row {
      display: flex;
      justify-content: space-between;
    }

    &-key {
      text-transform: uppercase;
      font-family: $font-maersk-headline;
      font-weight: 700;
      padding-right: 2.7em;
    }

    &-value {
      max-width: 10em;
      overflow: hidden;
    }

    @include media-breakpoint-up(lg) {
      display: table;
      border-collapse: separate;
      border-spacing: 0 $gutter-small;

      &:not(:last-child) {
        margin-right: $margin-enormous;
      }

      &-row {
        display: table-row;
      }
  
      &-key {
        display: table-cell;
      }
  
      &-value {  
        display: table-cell;
      }
    }
  }

  &__specs {
    margin-left: 0.875em;
    white-space: nowrap;

    @include media-breakpoint-up(lg) {
      margin-left: $margin-big;
    }
  }

  &__specs-trigger {
    color: $color-primary;
    font-size: $font-size-caption;
    cursor: pointer;
    line-height: 0.8em;

    @include media-breakpoint-up(lg) {
      font-size: 1.2em;
    }
  }

  &__specs-text {
    display: inline-block;
    width: 5.5em;
  }

  &__trigger-icon {
    font-size: 0.8em;
    display: inline-block;
    transform-origin: center;
    vertical-align: middle;
    transition: all 0.5s ease-in-out;

    &--flipped {
      transform: rotate(180deg);
    }
  }
}