@import "../../styles/modules/importAll";

.DatasetControls {
    height: 4rem;
    margin-top: 4rem;
    padding: 0 1rem;
    background-color: whitesmoke;

    * {}

    .controlGroup1, .controlGroup2 {
        display: inline-block;
        line-height: 4rem;
    }

    .controlGroup1 {
        width: 34%;
        text-align: left;
    }

    .controlGroup2 {
        width: 66%;
        text-align: right;
    }

    .datasetEditorContainer {
        line-height: 1.4rem;
    }

    .datasetEditorButton {
        text-align: left;
        padding: 0.5rem 1.5rem;
        position: relative;
        background-color: white;
        margin-right: 1rem;
    }

    .datasetEditorToggle {
        padding: 0.5rem 2.5rem 0.5rem 1.5rem;
        &:after {
            content: '';
            height: 0px;
            width: 0px;
            border-top: 0.4rem solid rgb(30, 30, 30);
            border-left: 0.4rem solid transparent;
            border-right: 0.4rem solid transparent;
            position: absolute;
            top: 1.1rem;
            right: 1rem;
        }
        &-disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }
    }

    .columnCount, .rowCount, .search {
        padding: 0.5rem;
    }

    .search {
        position: relative;

        input {
            padding: 0.5rem 1rem;
            width: 12rem;
            border: 0;
        }

        &:after {
            vertical-align: top;
            content: '';
            width: 0.1rem;
            height: 2rem;
            margin: 1rem 1.5rem 0 2rem;
            display: inline-block;
            background-color: rgb(30, 30, 30);
        }
    }

    .transformationLogToggle {
        padding: 0.5rem 1.5rem;
    }
}