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

@mixin avatar-size($size) {
    height: v(avatar-#{$size}-size);
    width: v(avatar-#{$size}-size);
    min-width: v(avatar-#{$size}-size);
    @include type-style(avatar-#{$size});

    ::ng-deep nx-icon {
        font-size: v(avatar-#{$size}-icon-size);
    }
}

:host {
    background: v(avatar-background-color);
    color: v(avatar-color);
    border-radius: 50%;
    text-align: center;

    .nx-avatar__content-wrapper {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    ::ng-deep figure {
        width: 100%;
    }
}

// Sizes
:host.nx-avatar--xsmall {
    @include avatar-size(xsmall);
}

:host.nx-avatar--small {
    @include avatar-size(small);
}

:host.nx-avatar--small-medium {
    @include avatar-size(small-medium);
}

:host.nx-avatar--medium {
    @include avatar-size(medium);
}

:host.nx-avatar--large {
    @include avatar-size(large);
}

:host.nx-avatar--xlarge {
    @include avatar-size(xlarge);
}

// Additional button styles
:host.is-button {
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;

    &:before,
    ::ng-deep .nx-image:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 50%;
        top: 0;
        left: 0;
    }

    &:hover:not(:disabled) {
        // for text and icons
        &:before {
            background-color: rgba(0, 0, 0, 0.1);
        }

        // for images
        ::ng-deep .nx-image:after {
            background-color: rgba(0, 0, 0, 0.1);
        }
    }

    &:active:not(:disabled) {
        // for text and icons
        &:before {
            background-color: rgba(0, 0, 0, 0.2);
        }

        // for images
        ::ng-deep .nx-image:after {
            background-color: rgba(0, 0, 0, 0.2);
        }
    }

    &:disabled {
        cursor: not-allowed;
        opacity: v(avatar-disabled-opacity);
    }

    &:focus {
        // don't show native focus style
        outline: none;
    }

    // don't show inner dotted border on firefox
    &::-moz-focus-inner {
        border: 0;
    }

    &.cdk-keyboard-focused {
        @include focus-style();
    }
}

@media screen and (forced-colors: active) {
    :host {
        border: 2px solid CanvasText;
    }

    :host.is-button {
        border: 2px solid buttonText;
        background-color: buttonFace;
    }

    :host.is-button:disabled {
        opacity: 1;
        border-color: GrayText;
        color: GrayText;
    }
}
