@import '~styles/config';

.heroDockItem {
  display: flex;
  align-items: center;

  width: 50%;
  height: 40px;
  user-select: none;

  @media (min-width: $min-mobile) {
    width: 33%;
  }

  @media (min-width: $min-tablet) {
    width: auto;
    height: 90px;
  }


  &:hover &__link,
  &.selected &__link,
  &:focus &__link {
    color: $color-dark;
    fill: $color-dark;
  }

  &.inverted:hover &__link,
  &.inverted.selected &__link,
  &.inverted.focus &__link {
    @include colorify();
    @include colorify('fill');
  }

  &:first-child &__link {
    padding-left: 0;
  }

  &:nth-child(3) &__link {
    @media (max-width: $max-mobile) {
      padding-left: 0;
    }
    @media (min-width: $min-mobile) and (max-width: $max-tablet) {
      padding-left: 10px;
    }
  }

  &:nth-child(4) &__link {
    @media (min-width: $min-mobile) and (max-width: $max-tablet) {
      padding-left: 0;
    }
  }

  &:nth-child(5) &__link {
    @media (max-width: $max-mobile) {
      padding-left: 0;
    }
    @media (min-width: $min-mobile) and (max-width: $max-tablet) {
      padding-left: 10px;
    }
  }

  svg { // stylelint-disable-line
    height: 22px;
    max-width: 20px;
  }

  &.addService {
    @media (min-width: $min-tablet) {
      position: absolute;
      right: $gutter;
    }

    @media (min-width: $min-1200) {
      margin-right: $gutter*0.5;
    }
  }

  &__link {
    &.link {
      @include reset-anchor;
      color: $color-grey500;
    }

    &.button {
      @include reset-button;
      font-weight: 500;

      @media (min-width: $min-desktop) {
        flex-direction: row;
        padding: 0 30px 0 15px;
      }
      @media (min-width: $min-1200) {
        padding: 0 30px 0 20px;
      }

      .addService & {
        padding-right: $gutter;
      }
    }

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    padding: 0 10px;
    height: 100%;

    overflow: hidden;

    cursor: pointer;
    font-weight: 500;
    color: $color-grey500;

    fill: $color-grey500;

    @media (min-width: $min-mobile) {
      max-width: 100%;
    }

    @media (min-width: $min-tablet) and (max-width: $max-desktop) {
      justify-content: center;
      flex-direction: column;
      padding: 0 10px;
      text-align: center;
    }

    @media (min-width: $min-desktop) {
      justify-content: center;
      flex-direction: row;
      padding: 0 15px;
    }
    @media (min-width: $min-1200) {
      padding: 0 20px;
    }
  }

  &__icon {
    margin-right: 10px;
    height: 22px;

    @media (min-width: $min-tablet) and (max-width: $max-desktop) {
      margin-bottom: 10px;
      margin-right: 0;
    }

    @media (min-width: $min-desktop) {
      margin-right: 10px;
    }

    .addService & {
      @media (min-width: $min-desktop) {
        order: 2;
        margin-right: 0;
        margin-left: 10px;
      }
    }
  }

  &__label {
    @include responsive-font(10, 18);

    font-family: $font-heading;
    white-space: nowrap;
  }
}