@import '../../../assets/scss/variables.scss';
@import '../../../assets/scss/mixins.scss';

.header-menu {
  list-style: none;
  color: white;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  .header-menu--item {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    @include desktop() {
      padding-right: 36px;
      font-size: var(--h3-md);
    }
    @include tablet() {
      padding-right: 30px;
      font-size: var(--h3-sm);
    }
    @include mobile() {
      padding-right: 24px;
      font-size: var(--h3-xs);
    }
    &.logo {
      padding-right: 16px;
    }
    .go-home {
      cursor: pointer;
      height: 150px;
      overflow: hidden;
      border-radius: 48px;
      @include mobile() {
        height: 120px;
      }
      .coco-logo {
        height: 140px;
        width: 140px;
        @include mobile() {
          height: 110px;
          width: 110px;
        }
      }
    }
    &.selected {
      background: $primaryRed;
      border-radius: 20px;
      border: 1px solid $primaryGrey;
    }
  }
}

@include touch() {
  .header-menu--item.home {
    display: none;
  }
}