@use '../../../../styles/_globals.scss' as *;

:host ::ng-deep {
  .mat-mdc-form-field {
    margin-bottom: 4px;
  }
}

.row {
  display: flex;
  margin-bottom: var(--s3);
  border: 1px solid var(--extra-border-color);
  padding: 8px;
  box-shadow: var(--whiteframe-shadow-2dp);
  border-radius: 8px;
  position: relative;

  background: var(--bg-slightly-lighter);
  border-color: var(--extra-border-color);

  @include mq(component) {
    margin-bottom: 0;
  }
}

.field {
  flex-grow: 1;
}

.remove-btn {
  position: absolute;
  right: -6px;
  top: -6px;
}

.list-wrapper {
  @include mq(component) {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
  }
}
