@use '../../assets/styles/index' as *;

.root {
    position: relative;
    min-height: 104px;
    border: 2px dashed $gray40;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre;

    &.drop-start {
        border: 2px dashed $blue;
    }

    &.drop-over {
        background-color: $blue-lightest;
    }

    .link {
        color: $blue;

        &:hover {
            color: $blue-dark;
        }
    }

    .drop-area {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .icon-blue {
        fill: var(--uui-primary);
        margin-right: 6px;
    }
}
