// string literal textarea: overwrite material styling !important
.string-literal.short-text {
  .mat-button.select-lang {
    min-width: 36px !important;
    padding: 0 8px !important;
    border-radius: 4px 0 0 0 !important;
  }
  .mat-form-field-infix {
    margin-left: 12px;
  }
}

.string-literal.long-text {
  display: flex;

  // select language
  .mat-button-toggle {
    height: 36px;
    width: 56px;

    .mat-button-toggle-button {
      width: 50px !important;
    }
  }

  .mat-button-toggle-appearance-standard {
    .mat-button-toggle-label-content {
      line-height: 36px !important;
      padding: 0 8px !important;
    }
  }

  .mat-button-toggle-vertical {
    height: calc(4 * 36px + 2px);
    border-radius: 4px 0 0 4px !important;
    border-right: 0px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0px;
    }
  }

  // textarea
  .mat-form-field-wrapper {
    width: 100%;
    .mat-form-field-flex {
      //   padding-left: 12px !important;
      border-left: 1px solid rgba(0, 0, 0, 0.12);
      min-height: calc(4 * 36px + 2px);

      .mat-form-field-infix {
        margin-left: 12px;

        // negative values are not the best choice,
        // but with this margin the placeholder is at the
        // same position as in the short-text input
        margin-top: -12px;
      }
    }
  }

  .string-literal-textarea {
    display: flex !important;

    textarea {
      min-height: calc(4 * 36px) !important;
    }
  }
}