.md-list-item-base-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--mds-color-theme-text-primary-normal);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  box-sizing: border-box;
  outline: none;

  & > div {
    overflow: visible;
  }

  &[data-interactive='true'] {
    cursor: pointer;

    &:hover,
    &.hover {
      background-color: var(--mds-color-theme-background-primary-hover);
    }

    &:active,
    &.active {
      color: var(--mds-color-theme-text-primary-normal);
      background-color: var(--mds-color-theme-background-primary-active);

      @media (forced-colors: active) {
        background-color: SelectedItem !important;
        color: SelectedItemText !important;
      }
    }

    &.focus {
      color: var(--mds-color-theme-text-primary-normal);
    }

    &[data-disabled='true'],
    &.disable {
      cursor: default;
      background-color: var(--mds-color-theme-background-primary-ghost);

      &,
      .md-text-wrapper,
      .md-text-wrapper::part(text) {
        color: var(--mds-color-theme-text-primary-disabled);

        @media (forced-colors: active) {
          color: GrayText !important;
        }
      }

      mdc-icon {
        --mdc-icon-fill-color: var(--mds-color-theme-text-primary-disabled);

        @media (forced-colors: active) {
          --mdc-icon-fill-color: GrayText !important;
        }
      }
    }
  }

  &[data-allow-text-select='true'] {
    user-select: text;
    cursor: auto !important;
  }

  &[data-disabled='true'],
  &.disable {
    cursor: default;
    background-color: var(--mds-color-theme-background-primary-ghost);

    &,
    .md-text-wrapper,
    .md-text-wrapper::part(text) {
      color: var(--mds-color-theme-text-primary-disabled);
    }

    mdc-icon {
      --mdc-icon-fill-color: var(--mds-color-theme-text-primary-disabled);
    }
  }

  & > div[data-position='start'] {
    width: fit-content;
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  &[data-size='32'] > div[data-position='start'] {
    margin-right: 0.5rem;
  }

  & > div[data-position='fill'],
  *[data-position='middle'] {
    width: 100%;

    // trim any type of text inside
    p,
    span,
    .md-text-wrapper,
    .md-text-wrapper::part(text) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & > div[data-position='end'] {
    width: auto;
    margin-left: 0.75rem;
    flex-shrink: 0;

    & > button {
      margin: 0;
    }
  }

  &[data-size='32'] {
    height: 2rem;
  }

  &[data-size='40'] {
    height: 2.5rem;
  }

  &[data-size='50'] {
    height: 3.125rem;
  }

  &[data-size='70'] {
    height: 4.375rem;
  }

  &[data-size='auto'] {
    height: auto;
  }

  &[data-shape='rectangle'] {
    border-radius: 0.5rem;
  }

  &[data-padded='true'] {
    padding: 0 0.75rem;
  }

  &[data-shape='isPilled'] {
    border-radius: 100vh;

    &[data-size='32'] {
      padding: 0 0.75rem 0 0.25rem;
    }

    &[data-size='50'] {
      padding: 0 0.75rem 0 0.5rem;
    }

    &[data-size='auto'] {
      height: auto;
    }
  }
}

.md-list-item-base-context-menu-wrapper {
  max-width: 20rem;
  border-radius: 0.75rem;
  z-index: 9999;

  & button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: var(--md-globals-border-clear);
    text-align: left;
    width: 100%;
    background-color: var(--mds-color-theme-button-secondary-normal);
    color: var(--mds-color-theme-text-primary-normal);

    &:hover {
      background-color: var(--mds-color-theme-button-secondary-hover);
      color: var(--mds-color-theme-text-primary-normal);
    }
  }
}