:host {
    display: flex;
    position: relative;
    flex-direction: row;
    border-color: var(--mat-sys-secondary-container);
    background-color: var(--mat-sys-secondary-container);
    overflow: hidden;

    & > a {
        position: relative;
        flex: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--mat-sys-surface-container-lowest);

        &.has-action {
            cursor: pointer;

            &.suggest-upload .action-overlay {
                opacity: 0.66;
            }

            &:hover,
            &.natural-file-over {
                .action-overlay {
                    opacity: 1;
                }
            }
        }
    }

    .action-overlay,
    .file-preview {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        line-height: 1.3em;
        text-align: center;
    }

    .action-overlay {
        background-color: var(--mat-sys-primary-fixed);
        color: var(--mat-sys-on-primary-fixed);
        @supports (color: color-mix(in srgb, red, blue)) {
            background-color: color-mix(in srgb, var(--mat-sys-primary-fixed) 85%, transparent);
        }
    }

    .file-preview {
        background-color: var(--mat-sys-tertiary-fixed);
        color: var(--mat-sys-on-tertiary-fixed);
        @supports (color: color-mix(in srgb, red, blue)) {
            background-color: color-mix(in srgb, var(--mat-sys-tertiary-fixed) 85%, transparent);
        }
    }

    .action-overlay {
        opacity: 0;

        & > div {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            justify-content: center;
            align-items: center;
            opacity: 0;
        }
    }
}