.cobalt- {
  &BasicCell {
    @apply c-text-onSurface;

    display: flex;
    align-items: center;
  }

  &BasicCell__Main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  &BasicCell__Title {
    @apply c-text-title-sm c-text-onSurface;
    margin-bottom: 0;
  }

  &BasicCell__Content {
    @apply c-text-body-md;
  }

  &BasicCell__Thumb {
    @apply c-bg-surfaceContainerVariant;

    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;

    border-radius: 50%;

    img {
      display: block;
      width: 44px;
      height: 44px;
    }
  }

  &BasicCell__Thumb--square {
    @apply c-rounded-lg;
  }

  &BasicCell__LeftAddon {
    @apply c-pr-sm;
  }

  &BasicCell__RightAddonIcon {
    @apply c-pl-sm;
    margin-left: auto;
  }

  &BasicCell--large {
    .cobalt-BasicCell__Title {
      @apply c-text-title-sm c-mb-2xs;
    }

    .cobalt-BasicCell__Thumb {
      img {
        width: 64px;
        height: 64px;
      }
    }
  }
}