@use 'sass:color';
@use '../../styles/mixins/hover' as mixins-hover;
@use '../../styles/mixins/hover';
@use '../../styles/variables';

@mixin nav-item-variant($color, $hover-color, $border-bottom) {
    & {
        color: $color;
    }

    > i,
    > .thy-icon {
        color: variables.$nav-item-icon-color;
    }

    &.active,
    &.thy-nav-origin-active {
        color: $hover-color;
        @if $border-bottom {
            border-bottom: $border-bottom;
        }
        > i,
        > .thy-icon {
            color: $hover-color;
        }
    }
    @include hover.hover-active {
        color: $hover-color;
        text-decoration: none;

        > i,
        > .thy-icon {
            color: $hover-color;
        }
    }
    // Disabled state lightens text
    &.disabled {
        color: variables.$nav-item-disabled-color;
        border-bottom: none;
    }
}

@mixin nav-item-pills-variant($color, $hover-color, $background: variables.$gray-100, $border-radius: 18px) {
    & {
        background: $background;
        color: $color;
        border-radius: $border-radius;
    }

    &.thy-nav-origin-active {
        text-decoration: none;
        background: rgba($hover-color, 0.1);
        color: $hover-color;
    }

    @include hover.hover-active {
        text-decoration: none;
        background: rgba($hover-color, 0.1);
        color: $hover-color;
    }
    &.disabled {
        color: variables.$nav-item-disabled-color;
    }
}

@mixin nav-item-size($padding, $margin-right, $font-size: variables.$nav-item-font-size) {
    & {
        font-size: $font-size;
        margin-right: $margin-right;

        @if $padding {
            padding: $padding;
        }
    }

    &:last-child {
        margin-right: 0;
    }
}

@mixin set-nav-size($nav-item-right-offset: 0px, $nav-type: '') {
    $nav-card-item-padding: variables.$nav-card-item-padding-y variables.$nav-card-item-padding-x;
    $nav-card-item-right: variables.$nav-card-item-right;

    .thy-nav-item {
        height: variables.$nav-height;
        @if ($nav-type == 'card') {
            @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size);
        } @else {
            @include nav-item-size(
                variables.$nav-item-padding-y variables.$nav-item-padding-x,
                variables.$nav-item-right - $nav-item-right-offset,
                variables.$nav-item-font-size
            );
        }
    }

    &.thy-nav-lg {
        .thy-nav-item {
            height: variables.$nav-height-lg;
            @if ($nav-type == 'card') {
                @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size-lg);
            } @else {
                @include nav-item-size(
                    variables.$nav-item-padding-y-lg variables.$nav-item-padding-x-lg,
                    variables.$nav-item-right-lg - $nav-item-right-offset,
                    variables.$nav-item-font-size-lg
                );
            }
        }
    }

    &.thy-nav-sm {
        .thy-nav-item {
            height: variables.$nav-height-sm;
            @if ($nav-type == 'card') {
                @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size-sm);
            } @else {
                @include nav-item-size(
                    variables.$nav-item-padding-y-sm variables.$nav-item-padding-x-sm,
                    variables.$nav-item-right-sm - $nav-item-right-offset,
                    variables.$nav-item-font-size-sm
                );
            }
        }
    }
}

@mixin nav-item-clear-margin-right() {
    &:last-child {
        margin-right: 0;
    }
}

@mixin nav-item-divider-variant($nav-item-hover-color, $divider-height, $nav-item-padding-right) {
    & {
        position: relative;
    }

    &:after {
        display: block;
        position: absolute;
        width: 0;
        content: '';
        border-right: 1px solid variables.$nav-divider-color;
        top: calc(50% - #{$divider-height} / 2);
        right: ($nav-item-padding-right * 0.5) * -1;
        height: $divider-height;
    }
    &:last-child {
        &:after {
            display: none;
        }
    }
    @include hover.hover-active {
        color: $nav-item-hover-color;
        text-decoration: none;
    }
    .thy-icon,
    i {
        margin-right: variables.$rem-5px;
    }
}

@mixin clear-nav-item-bottom {
    & {
        border-bottom: none;
    }

    &.active {
        border-bottom: none;
    }
    @include mixins-hover.hover-focus-active {
        border-bottom: none;
    }
}

@mixin nav-border-bottom() {
    &::before {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        border-bottom: 1px solid variables.$nav-border-color;
        content: '';
    }
}
