@import '../shared-styles/index';

:host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: nx-border-radius(s) * 3;
    padding-left: 3px;
    padding-right: 3px;
    height: 16px;
    @include type-style(indicator);
    color: v(indicator-color);
    background-color: v(indicator-background-color);
    border: 1px solid v(indicator-border-color);

    &:empty {
        height: 10px;
        width: 10px;
    }

    &:not(:empty) {
        min-width: 16px;
    }

    @media screen and (forced-colors: active) {
        border: nx-border-size(xs) solid CanvasText;
        color: CanvasText;
        background-color: Canvas;
    }

    &.nx-indicator--over-text {
        position: absolute;
        top: 0;
        left: 100%;

        &:not(:empty) {
            top: -4px;
        }

        [dir='rtl'] & {
            left: auto;
            right: 100%;
        }
    }

    &.nx-indicator--with-overlap {
        position: absolute;

        &:not(:empty) {
            left: calc(100% - 4px);

            [dir='rtl'] & {
                left: auto;
                right: calc(100% - 4px);
            }
        }
    }

    &.nx-indicator--after-text {
        vertical-align: top;
        margin-left: 4px;

        [dir='rtl'] & {
            margin-left: initial;
            margin-right: 4px;
        }
    }

    &.nx-indicator--over-icon {
        position: absolute;
        left: 50%;
        bottom: 50%;

        &:empty {
            left: calc(50% + 2px);
            bottom: calc(50% + 2px);
        }

        [dir='rtl'] & {
            left: auto;
            right: 50%;

            &:empty {
                left: auto;
                right: calc(50% + 2px);
            }
        }
    }
}

// Targeting IE11 inline-flex and absolute position troubles
:host-context(_:-ms-fullscreen, :root) {
    &.nx-indicator--over-icon,
    &.nx-indicator--over-text {
        display: block;
        padding-top: 1px;
        text-align: center;
    }
}
