////@import "../../../abstracts/abstracts";

// Dynabloqs Material Design textarea
// The textarea uses the dbqmd-input for its basics.
.dbqmd-label.dbqmd-textarea-label {
    .dbqmd-input.dbqmd-textarea {   
        @include scrollbar;
        font-size: $font-size-base;
        line-height: $line-height-base;
        text-wrap: wrap;
        white-space: pre-wrap;
        overflow-y: auto !important; // This has to be important due to the overflow: hidden style for ellipsis in dbqmd-input.

        // Once the user starts resizing, the automatic height calculation is turned off.
        resize: vertical;

        // A textarea has the possibility of adding multiple lines and at a certain
        // height scrolling becomes possible. We prevent the text from scrolling 
        // into the label by using a large border top. This will also make sure
        // that the scrollbar will start below the label and not at the top.
        &.dbqmd-focus,
        &.dbqmd-has-value {
            border-top: 24px solid $material-design-default-background-color;
            padding-top: 0px;
        }

        &.dbqmd-hover {
            border-top-color: $material-design-hover-background-color;
        }
        
        &:disabled {
            border-top-color: $material-design-disabled-background-color;
        }

        // This class is added when the textarea size has been increased to at least 2 lines.
        // Since the original size of a textarea with 1 line is smaller than the $material-design-height,
        // we must only set this min-height once we go over 1 line. Otherwise the user can resize it back
        // to a lower size than original, making it possible to reduce the size to below the height of a single line.
        &.dbqmd-has-increased-size {
            min-height: $material-design-height;
        }

        // No label styling (compact view)
        &.dbqmd-empty-label,
        &.dbqmd-has-increased-size.dbqmd-empty-label {
            min-height: $material-design-height-compact;
            padding-top: 10px;

            &.dbqmd-focus,
            &.dbqmd-has-value {
                border-top: 0;
            }
        }
    }

    // No label styling (compact view)
    &.dbqmd-empty-label,
    &.dbqmd-has-increased-size.dbqmd-empty-label {
        .dbqmd-icon {
            top: 10px;
        }
    }
}