.file {
    padding: var(--mantine-spacing-sm);
    border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
    border-radius: var(--mantine-radius-md);
    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

    @mixin hover {
        color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-white));
        border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
    }
}

.text {
    max-width: calc(95% - 50px - var(--mantine-spacing-sm));
}

.iconContainer {
    position: relative;
    width: rem(45);
    height: rem(45);

    @mixin hover {
        .remove {
            display: block;
        }

        .icon {
            opacity: 0.15;
        }
    }
}

.icon {
    opacity: 1;
}

.remove {
    display: none;
    position: absolute;
    top: 2px;
    left: 2px;
    width: rem(42);
    height: rem(42);
    color: var(--mantine-color-red-7);
    cursor: pointer;
}
