/* Copyright (C) 2016 NooBaa */

drop-area {
    display: block;

    .drop-container {
        position: relative;
        border: 1px dashed rgb(var(--color11));
        font-size: @font-size3;
        height: 100%;

        &:focus-within {
            border-color: rgb(var(--color20));
        }

        &::after, &::before {
            content: '';
            position: absolute;
            border: 1px solid;
            background: transparent;
            top: -1px;
            left: -1px;
            width: 0;
            height: 0;
            opacity: 0;
        }

        &::before {
            border-color:
                rgb(var(--color20))
                rgb(var(--color20))
                transparent
                transparent;
        };

        &::after {
            border-color:
                transparent
                transparent
                rgb(var(--color20))
                rgb(var(--color20));
        }

        &.dragover {
            @dur: 300ms;

            &::before {
                width: 100%;
                height: 100%;
                opacity: 1;
                transition:
                    opacity 0ms,
                    width @dur linear,
                    height @dur linear @dur;
            }

            &:after {
                width: 100%;
                height: 100%;
                opacity: 1;
                transition:
                    opacity 0ms,
                    height @dur linear,
                    width @dur linear @dur;
            };

            &.active, &.disabled {
                .shake();
                cursor: no-drop;
            }
        }

        &.active {
            border-color: rgb(var(--color29));
        }

        &.disabled, &.disabled.dragover {
            border-color: rgb(var(--color09));
        }
    }

    &.invalid .drop-container {
        border-color: rgb(var(--color31));
    }
}
