create-comment.component.scss

button {
  min-width: 80px;
}

form {
  display: block;
  width: 100%;
  max-width: 800px;
  margin-bottom: 50px;
}

app-comment-list {
  width: 100%;
  max-width: 800px;
}

textarea {
  line-height: 120%;
  color: var(--on-surface);
  caret-color: var(--on-surface);
}

.send {
  color: var(--on-primary);
  background-color: var(--primary);
}

mat-hint {
  color: var(--on-surface) !important;
}

.mat-select-value-text {
  color: var(--on-surface);
  caret-color: var(--on-surface);
}

.placeholder {
  color: var(--on-surface);
}

.tag-form-field{
  @media screen and (max-width:500px) {
    width:70px;
  }
  z-index:10000;
}

.tag-select{
}

.anchor-right{
  @media screen and (max-width:500px) {
    width:70px;
    left:calc( 100% - 70px );
  }
  width:200px;
  height:50px;
  position:relative;
  left:calc( 100% - 200px );
  top:0;
}

.anchor-wrp{
  width:100%;
  height:0;
  position:relative;
  left:0;
  top:0;
}

::ng-deep .mat-form-field-label {
  color: var(--on-surface)!important;
}

::ng-deep .mat-form-field-underline {
  background-color: var(--on-surface)!important;
}

::ng-deep .mat-form-field-ripple {
  background-color: var(--on-surface)!important;
}

::ng-deep .mat-select-arrow-wrapper .mat-select-arrow {
  color: var(--on-surface);
}

::ng-deep .mat-select-value-text {
  color: var(--on-surface);
}

::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: var(--primary);
}

::ng-deep .mat-tab-label-active,
::ng-deep .mat-tab-label {
  color: var(--on-surface);
  opacity: 1!important;
}

::ng-deep .mat-ink-bar {
  background-color: var(--primary) !important;
}