@import '../../styles/colors.scss';

:host {
    position: relative;

    display: flex;

    border: 1px solid white;
}

.kit-input-file {
    &-background {
        flex: 1;

        position: relative;

        background-color: $primary-100;

        &::before,
        &::after {
            content: "";

            position: absolute;

            top: 50% - 10%;
            left: 50% - 35%;

            width: 70%;
            height: 10%;

            background-color: $secondary2-100;
        }

        &::after {
            transform: rotate(90deg);
        }

        &:hover {
            background-color: $primary-200;

            &::after,
            &::before {
                background-color: $secondary2-200;
            }
        }

        &:active {
            background-color: $primary-300;

            &::after,
            &::before {
                background-color: $secondary2-300;
            }
        }
    }

    &-image {
        max-width: 100%;
        object-fit: contain;
    }

    &-minus {
        height: 100%;
        width: 100%;

        position: absolute;


        &::before {
            content: "";

            position: absolute;

            top: 50% - 10%;
            left: 50% - 35%;

            width: 70%;
            height: 10%;

            background-color: $danger;

            opacity: 0.3;
        }

        &:hover {
            &::before {
                opacity: 1;
            }
        }

        &:active {
            &::before {
                background-color: $additional-100;
            }
        }
    }
}