@import '../../utils/utils.scss';

:host { display: inline-block; }

:host(:first-child) .comp-scu-nav-item-v .line-top {
  visibility: visible;
}

.comp-scu-nav-item-v {
  @include comp-scu-nav-item-v-default;
  @include button;

  .label {
    @include comp-scu-nav-item-v-default-label;
    @include comp-scu-nav-item-v-default-label--html-autolayout;
  }

  .line-top {
    visibility: hidden;
    @include comp-scu-nav-item-v-default-line-top;
    @include comp-scu-nav-item-v-default-line-top--absolute-layout;
  }

  .line-bottom {
    @include comp-scu-nav-item-v-default-line-bottom;
    @include comp-scu-nav-item-v-default-line-bottom--absolute-layout;
  }

  .selected {
    @include comp-scu-nav-item-v-default-selected;
    @include comp-scu-nav-item-v-default-selected--absolute-layout;
  }

  &:hover {
    @include comp-scu-nav-item-v-hover;
    // @include comp-scu-nav-item-v-hover--absolute-layout;

    .label {
      @include comp-scu-nav-item-v-hover-label;
      @include comp-scu-nav-item-v-hover-label--html-autolayout;
    }

    .line-top {
      @include comp-scu-nav-item-v-hover-line-top;
      @include comp-scu-nav-item-v-hover-line-top--absolute-layout;
    }

    .line-bottom {
      @include comp-scu-nav-item-v-hover-line-bottom;
      @include comp-scu-nav-item-v-hover-line-bottom--absolute-layout;
    }

    .selected {
      @include comp-scu-nav-item-v-hover-selected;
      @include comp-scu-nav-item-v-hover-selected--absolute-layout;
    }
  }

  &:focused {
    @include comp-scu-nav-item-v-focused;
    // @include comp-scu-nav-item-v-focused--absolute-layout;

    .label {
      @include comp-scu-nav-item-v-focused-label;
      @include comp-scu-nav-item-v-focused-label--html-autolayout;
    }

    .line-top {
      @include comp-scu-nav-item-v-focused-line-top;
      @include comp-scu-nav-item-v-focused-line-top--absolute-layout;
    }

    .line-bottom {
      @include comp-scu-nav-item-v-focused-line-bottom;
      @include comp-scu-nav-item-v-focused-line-bottom--absolute-layout;
    }

    .selected {
      @include comp-scu-nav-item-v-focused-selected;
      @include comp-scu-nav-item-v-focused-selected--absolute-layout;
    }
  }


  &.selected {
    @include comp-scu-nav-item-v-selected;

    .label {
      @include comp-scu-nav-item-v-selected-label;
      @include comp-scu-nav-item-v-selected-label--html-autolayout;
    }

    .line-top {
      @include comp-scu-nav-item-v-selected-line-top;
      @include comp-scu-nav-item-v-selected-line-top--absolute-layout;
    }

    .line-bottom {
      @include comp-scu-nav-item-v-selected-line-bottom;
      @include comp-scu-nav-item-v-selected-line-bottom--absolute-layout;
    }

    .selected {
      @include comp-scu-nav-item-v-selected-selected;
      @include comp-scu-nav-item-v-selected-selected--absolute-layout;
    }
  }

  &selected:hover {
    @include comp-scu-nav-item-v-selected-hover;
    // @include comp-scu-nav-item-v-selected-hover--absolute-layout;

    .label {
      @include comp-scu-nav-item-v-selected-hover-label;
      @include comp-scu-nav-item-v-selected-hover-label--html-autolayout;
    }

    .line-top {
      @include comp-scu-nav-item-v-selected-hover-line-top;
      @include comp-scu-nav-item-v-selected-hover-line-top--absolute-layout;
    }

    .line-bottom {
      @include comp-scu-nav-item-v-selected-hover-line-bottom;
      @include comp-scu-nav-item-v-selected-hover-line-bottom--absolute-layout;
    }

    .selected {
      @include comp-scu-nav-item-v-selected-hover-selected;
      @include comp-scu-nav-item-v-selected-hover-selected--absolute-layout;
    }
  }

}