
.text-group {
    position: relative;
    //outline: 1px solid $input-border-color;
    box-shadow: 0 0 0 1px $input-border-color;

    border-radius: 3px;
    padding: 10px;
    margin-top: 40px;
    padding-top: 25px;
    transition: box-shadow 0.2s linear;
    //transition: outline 0.2s linear;

    &:hover {
        box-shadow: 0 0 0 2px $input-border-hover-color;
    }

    &:focus-within {
        box-shadow: 0 0 0 2px map_get($ui-colors, primary-color);
        //outline: 2px solid $input-border-hover-color;
    }

    textarea {
        overflow: auto;
        outline: none;
        resize: none;
        padding: 0;
        border: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        font-size: 16px;
        background: transparent;

        min-height: 100px;
        width: 100%;

        &:focus ~ label,
        &:valid ~ label,
        &:read-only ~label {
            top: 5px;
            font-size: 12px;
        }

        &:focus ~ label {
            color: map_get($ui-colors, primary-color);
        }
    }

    label {
        color: rgba(0,0,0,0.54);
        font-size: 16px;
        position: absolute;
        pointer-events: none;
        left: 10px;
        top: 10px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }
}
