File Card

$fileCard_styles: (
    background-color: $_backdrop-color,
    border-radius: $_border-radius,
) !default;

$fileCard_states: (
    default: $fileCard_styles,
    confirmed: (
    ),
    failed: (
    ),
) !default;

$fileCard_message_styles: (
    margin-top: ($_box_padding--small, var(--bp-small)),
    padding-top: ($_box_padding--small, var(--bp-small)),
    border-top: 1px solid $_minor-color,
) !default;

$fileCard_message_states: (
    default: $fileCard_message_styles,
    hover: (
    ),
    confirmed: (
    ),
    failed: (
        color: $_negative-color,
    ),
) !default;

$fileCard_gutter: $label_marker_gutter !default;

$fileCard_icons: (
    confirmed: map.get($label_marker_icons, valid),
    failed: map.get($label_marker_icons, invalid),
    loading: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5"/></svg>',
    remove: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L13 13M13 2L2 13" /></svg>',
) !default;

$fileCard_indicator_width: 18px !default;

$fileCard_button_icon_size: 16px !default;
$fileCard_button_size: 31px !default;

$fileCard_button_styles: (
    color: $_action-color,
    border-radius: 100vmax,
) !default;

$fileCard_button_states: (
    default: $fileCard_button_styles,
    hover: (
        color: $_action-foreground-color--hover,
        background-color: $_action-background-color--hover,
    ),
    focus: map-merge(
        $_focus_styles,
        (
            color: $_action-foreground-color--hover,
            background-color: $_action-background-color--hover,
        )
    ),
    active: (
        color: $_action-foreground-color--active,
        background-color: $_action-background-color--active,
    ),
) !default;

%fileCard {
    @include stack-spacing();

    padding: $_box_padding--small $_box_padding;
    padding: var(--bp-small) var(--bp);

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    transition: $_transition-duration--out;

    @include styles($fileCard_styles);

    @each $status in (confirmed, failed) {

        &.is-#{$status} {
            @include state-styles($fileCard_states, $status);
        }

    }

    > * {
        flex: 0 1 auto;
    }

    > * + * {
        margin-left: $fileCard_gutter;
    }

    &-name {
        flex: 0 1 auto;
    }

    &-indicator,
    &-button {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;

        position: relative;

        &::before {
            content: "";

            display: block;

            position: absolute;
            background: center center no-repeat;
        }

    }

    &-indicator {
        width: $fileCard_indicator_width;
        aspect-ratio: 1;

        &::before {
            inset: 0
        }

    }

    @each $status in (loading, confirmed, failed) {
        $color: $_text-color;

        @if $status == confirmed {
            $color: $_positive-color;
        }

        @if $status == failed {
            $color: $_negative-color;
        }

        &.is-#{$status} &-indicator::before {
            background-image: svg-url(map-get($fileCard_icons, $status), $color);

            @if $status == loading {
                @extend %animation--loading-spinner;
            }

        }

    }

    &-button {
        padding: 0;
        border: none;
        background: none;

        height: $fileCard_button_size;
        width: $fileCard_button_size;
        margin: (-.5 * $fileCard_button_size) (.5 * ($fileCard_button_icon_size - $fileCard_button_size));
        margin-left: auto;

        outline: transparent;

        transition: $_transition-duration;

        cursor: pointer;

        &:hover {
            transition: $_transition-duration--in;
        }

        &::before {
            width: $fileCard_button_icon_size;
            height: 100%;

            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);

            background-image: svg-url(map-get($fileCard_icons, remove));

            transition: inherit;
        }

        @each $status, $styles in $fileCard_button_states {

            $modifier: "";

            @if  $status != "default" {
                $modifier: ":#{$status}";
            }

            &#{$modifier} {
                @include styles($styles);

                &::before {
                    $color: map-get($styles, color);
                    background-image: svg-url(map-get($fileCard_icons, remove), $color);
                }

            }

        }

    }

    &-message {
        @extend %hint;

        flex: 1 0 auto;
        width: 100%;

        margin-left: 0;

        @include styles($fileCard_message_styles);
    }

    @each $status in (confirmed, failed) {

        &.is-#{$status} &-message {
            @include state-styles($fileCard_message_states, $status);
        }

    }

    &.has-button:hover &-message,
    &.has-button:focus-within &-message{
        @include state-styles($fileCard_message_states, hover);
    }

}

.fileCard {
    @extend %fileCard;

    &-name {
        @extend %fileCard-name;
    }

    &-indicator {
        @extend %fileCard-indicator;
    }

    &-button {
        @extend %fileCard-button;
    }

    &-message {
        @extend %fileCard-message;
    }

}