@import '_vars';
@import '_mixins';

.unrow {
    display: block;
}

h5 {
    font-size: .9rem;
    margin-top: 0;
    margin-bottom: .5rem;
}

.folders {
    .cdk-drag-placeholder {
        @include absolute(0, auto, auto, auto);
    }
}

.folder-container {
    & {
        width: $asset-width;
        position: relative;
        margin-bottom: 1rem;
        margin-right: .5rem;
        height: $asset-folder-height;
    }

    &-over {
        @include absolute(-6px, -6px, -6px, -6px);
        @include opacity(0);
        border: 2px solid $color-theme-blue;
    }

    &.cdk-drop-list-dragging {
        &:hover {
            .folder-container-over {
                @include opacity(1);
            }
        }
    }
}

.file-drop {
    & {
        @include transition(border-color .4s ease);
        border: 2px dashed $color-border;
        background: transparent;
        padding: 1rem;
        margin-bottom: 1rem;
        margin-right: 0;
        text-align: center;
    }

    &.drag {
        border-color: darken($color-border, 10%);
        border-style: dashed;
        cursor: copy;
    }

    &-button-input {
        @include hidden;
    }

    &-button {
        margin: .5rem 0;
    }

    &-or {
        font-size: .8rem;
    }

    &-info {
        color: darken($color-border, 30%);
    }
}

.btn {
    cursor: default;
}