@use 'synergy-colors';
@use 'synergy-fonts';
@use 'synergy-animations';


.textarea-container {
  transition: 3s;
  position: relative;
  width: 100%;
  height: 100%;
}

.textarea:focus {
  box-shadow: map-get(synergy-colors.$blue, 300);
  border-color: map-get(synergy-colors.$blue, 300);
}


// Toolbar
.textarea {
  max-width: 100%;
  min-width: 100%;
  max-height: 72px;
  min-height: 72px;
  border-radius: 4px;
  padding: 12px;
  border-color: black;
  padding: 15px;
}

.icon__textarea {
  position: absolute;
  color: map-get(synergy-colors.$blue, 300);
  right: 5px;
  top: 15px;
  transform: translateY(-50%);
}

.p-inputtext {
  border-radius: 4px;
  border-color: black;
  padding: 15px;
  overflow-y: auto;
  padding-right: 45px;
}

:host ::ng-deep .p-inputtextarea-resizable {
  resize: none;
}

:host ::ng-deep .p-inputtext:enabled:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem map-get(synergy-colors.$blue, 300);
  border-color: map-get(synergy-colors.$blue, 300);
}