//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';
@use '../../../tokens';

@mixin styles() {
    $tokens: tokens.md-comp-fab-values();

    &.surface {
        @include color(
            (
                'focus-icon-color': map.get($tokens, focus-icon-color),
                'hover-icon-color': map.get($tokens, hover-icon-color),
                'container-color': map.get($tokens, container-color),
                'icon-color': map.get($tokens, icon-color),
                'pressed-icon-color': map.get($tokens, pressed-icon-color),
                'label-text-color': map.get($tokens, label-text-color),
                'hover-label-text-color': map.get($tokens, hover-label-text-color),
                'focus-label-text-color': map.get($tokens, focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, pressed-label-text-color),
            )
        );
    }

    &.primary {
        @include color(
            (
                'container-color': map.get($tokens, primary-container-color),
                'focus-icon-color': map.get($tokens, primary-focus-icon-color),
                'hover-icon-color': map.get($tokens, primary-hover-icon-color),
                'icon-color': map.get($tokens, primary-icon-color),
                'pressed-icon-color': map.get($tokens, primary-pressed-icon-color),
                'label-text-color': map.get($tokens, primary-label-text-color),
                'hover-label-text-color': map.get($tokens, primary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, primary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, primary-pressed-label-text-color),
            )
        );
    }

    &.secondary {
        @include color(
            (
                'container-color': map.get($tokens, secondary-container-color),
                'focus-icon-color': map.get($tokens, secondary-focus-icon-color),
                'hover-icon-color': map.get($tokens, secondary-hover-icon-color),
                'icon-color': map.get($tokens, secondary-icon-color),
                'pressed-icon-color': map.get($tokens, secondary-pressed-icon-color),
                'label-text-color': map.get($tokens, secondary-label-text-color),
                'hover-label-text-color': map.get($tokens, secondary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, secondary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, secondary-pressed-label-text-color),
            )
        );
    }

    &.tertiary {
        @include color(
            (
                'container-color': map.get($tokens, tertiary-container-color),
                'focus-icon-color': map.get($tokens, tertiary-focus-icon-color),
                'hover-icon-color': map.get($tokens, tertiary-hover-icon-color),
                'icon-color': map.get($tokens, tertiary-icon-color),
                'pressed-icon-color': map.get($tokens, tertiary-pressed-icon-color),
                'label-text-color': map.get($tokens, tertiary-label-text-color),
                'hover-label-text-color': map.get($tokens, tertiary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, tertiary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, tertiary-pressed-label-text-color),
            )
        );
    }

    &.tonal-primary {
        @include color(
            (
                'container-color': map.get($tokens, tonal-primary-container-color),
                'focus-icon-color': map.get($tokens, tonal-primary-focus-icon-color),
                'hover-icon-color': map.get($tokens, tonal-primary-hover-icon-color),
                'icon-color': map.get($tokens, tonal-primary-icon-color),
                'pressed-icon-color': map.get($tokens, tonal-primary-pressed-icon-color),
                'label-text-color': map.get($tokens, tonal-primary-label-text-color),
                'hover-label-text-color': map.get($tokens, tonal-primary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, tonal-primary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, tonal-primary-pressed-label-text-color),
            )
        );
    }

    &.tonal-secondary {
        @include color(
            (
                'container-color': map.get($tokens, tonal-secondary-container-color),
                'focus-icon-color': map.get($tokens, tonal-secondary-focus-icon-color),
                'hover-icon-color': map.get($tokens, tonal-secondary-hover-icon-color),
                'icon-color': map.get($tokens, tonal-secondary-icon-color),
                'pressed-icon-color': map.get($tokens, tonal-secondary-pressed-icon-color),
                'label-text-color': map.get($tokens, tonal-secondary-label-text-color),
                'hover-label-text-color': map.get($tokens, tonal-secondary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, tonal-secondary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, tonal-secondary-pressed-label-text-color),
            )
        );
    }

    &.tonal-tertiary {
        @include color(
            (
                'container-color': map.get($tokens, tonal-tertiary-container-color),
                'focus-icon-color': map.get($tokens, tonal-tertiary-focus-icon-color),
                'hover-icon-color': map.get($tokens, tonal-tertiary-hover-icon-color),
                'icon-color': map.get($tokens, tonal-tertiary-icon-color),
                'pressed-icon-color': map.get($tokens, tonal-tertiary-pressed-icon-color),
                'label-text-color': map.get($tokens, tonal-tertiary-label-text-color),
                'hover-label-text-color': map.get($tokens, tonal-tertiary-hover-label-text-color),
                'focus-label-text-color': map.get($tokens, tonal-tertiary-focus-label-text-color),
                'pressed-label-text-color': map.get($tokens, tonal-tertiary-pressed-label-text-color),
            )
        );
    }
}

@mixin color($colors) {
    background-color: map.get($colors, 'container-color');

    & {
        & .icon {
            color: map.get($colors, icon-color);
        }
        & .label {
            color: map.get($colors, label-text-color);
        }
    }

    &:focus {
        & .icon {
            color: map.get($colors, focus-icon-color);
        }
        & .label {
            color: map.get($colors, hover-label-text-color);
        }
    }

    &:hover {
        & .icon {
            color: map.get($colors, hover-icon-color);
        }
        & .label {
            color: map.get($colors, focus-label-text-color);
        }
    }

    &:active {
        & .icon {
            color: map.get($colors, pressed-icon-color);
        }
        & .label {
            color: map.get($colors, pressed-label-text-color);
        }
    }
}