:host {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .settings-button {
    align-self: flex-end;
  }

  .color-input {
    cursor: pointer;
    padding: 0 5px;

    appearance: none;
    background: none;
    border: 0;

    &:focus {
      border-radius: 0;
      outline: none;
    }
  }

  .name-edit {
    flex: 1;
    width: 100%;

    ::ng-deep {
      wg-readonly-view {
        padding: 0;
      }

      wg-readonly-view,
      input {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}