.commit-message-avatar-component {
  // With this, the popover's absolute position will be relative to its parent
  position: relative;
  width: var(--text-field-height);
  height: var(--text-field-height);

  .avatar-button {
    // override default button styles
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: inherit;
    border: none;
    height: inherit;
    color: inherit;
    background-color: none;

    border-radius: 50%;

    .avatar-container,
    .avatar {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
    }
  }

  .toggletip {
    margin-right: var(--spacing-half);
  }

  .warning-badge {
    background-color: var(--commit-warning-badge-background-color);
    border: var(--commit-warning-badge-border-color) 1px solid;
    width: 18px;
    height: 18px;
    position: absolute;
    margin-top: -6px;
    margin-left: -7px;
    border-radius: 9px;

    > svg {
      height: 10px;
      // With width=100%, the icon will be centered horizontally
      width: 100%;
      vertical-align: middle;
    }

    &.warning > svg {
      color: var(--input-icon-warning-color);
    }

    &.error > svg {
      color: var(--input-icon-error-color);
    }
  }

  label {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  section + section {
    margin-top: var(--spacing);
  }

  section.button-group {
    display: flex;
    flex-direction: row;
  }

  .button-row {
    justify-content: flex-end;

    button {
      min-width: 120px;
      margin-right: var(--spacing-half);
    }
  }

  .secondary-text {
    color: var(--text-secondary-color);
  }

  .git-email {
    overflow-wrap: anywhere;
  }

  .popover-component {
    // This allows for using <Rows> to structure content within dialog content.
    // All Rows that are direct descendants of dialog content except for the
    // last one receive a bottom margin.
    .row-component:not(:last-child) {
      margin-bottom: var(--spacing);
    }

    width: 300px;
  }

  .link-button-component {
    display: inline;
  }
}
