@import "icons";

.dlp-folders {
    margin: 0 0 30px 18px !important;

    .posts-table-wrapper {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    &.dlp-folders-root {
        margin-left: 0 !important;
    }

    .dlp-folder {
        list-style-type: none;
    }

    .dlp-category {
        cursor: pointer;

        .dlp-icon.folder {
            display: none;
        }
    }

    .dlp-folder.closed {
        .dlp-icon.folder_open,
        .dlp-folder-inner {
            display: none;
        }

        .dlp-icon.folder {
            display: block;
        }
    }

    .dlp-category {
        display: flex;
        align-items: center;
    }

    .dlp-icon {
        &.folder,
        &.folder_open {
            fill: #f6b900;
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
    }

    .dlp-folder-label {
        display: flex;
        flex-direction: column;

        .dlp-category-name {
            line-height: 1.3;
        }

		.dlp-category-description {
			font-size: smaller;
		}

        .dlp-subfolder-count {
            font-size: 12px;
        }
    }

    .dlp-category-subcategories .dlp-icon {
        &.folder,
        &.folder_open {
            fill: #333333;
        }
    }

    .hidden {
        display: none;
    }
}

.dlp-folders-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px 0;

    input[type="search"] {
        -webkit-appearance: none;
        background-color: #f2f2f2;
        border: 0;
        box-shadow: inset 0 1px 1px rgba(26, 20, 20, 0.125);
        color: #43454b;
        height: 32px;
        margin: 0 0 0 6px;
        min-width: auto;
        padding: 0 .5em;
        border-radius: 3px;
    }
}

.dlp-folders-reset {
    margin-left: 20px;
    display: none;

    a {
        display: flex;
        align-items: center;
        justify-content: center;

        border: none;
        outline: none;
        box-shadow: none;
        font-size: inherit;
        font-weight: 400;
        text-decoration: none !important;
    }

    svg {
        fill: currentColor;
        height: 14px;
        width: 14px;
        margin-right: 10px;
    }
}

// loading icon
.dlp-folders-container .blockUI.blockOverlay::before {
	@include spinner-icon(30px);
}