// Header Utility Styles

.header {

  &__utility-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;

    &.header__utility-flex--left {
      justify-content: flex-start;
    }
  }

  &__utility {
    padding: 5px 0;
    background: $mine-shaft;
    text-align: right;
    flex: 0 100%;
    order: 1;
    display: none;

    &-enable-mobile {
      display: block;
    }

    @include mobile {
      display: block;
    }

    @include tablet() {
      order: 0;
    }

    .header--overlay & {
      order: 0;
    }

    .menu {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-end;
      align-items: center;

      &-item {
        margin: 0 8px;
      }

      .menu-item--icon-text {

        a {
          display: flex;
          flex-flow: row wrap;
          align-items: center;
        }

        .icon {
          margin-right: 5px;
        }
      }

      > .menu-item--icon {
        margin: 0 8px 0 30px;

        ~ .menu-item--icon {
          margin: 0 8px;
        }
      }
    }

    &--left,
    &--right {
      width: 100%;

      @include tablet() {
               width:49%;
               }
               
      .icon {
        width: 18px;
        height: 18px;
        fill: $white;
        display: block;

        .text--dark & {
          fill: $tundora;
        }

        .text--light & {
          fill: $white;
        }
      }
    }

    &--left {
      text-align: left;

      .menu {
        justify-content: flex-start;
      }
    }

    a {
      font-weight: 600;
      color: $white;
      display: block;
    }

    &.text--dark {
      a {
        color: $tundora;
      }
    }
  }
}
