.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: map.get($spacing-scale, 's-2');
  border-radius: map.get($spacing-scale, 's-1h');
  background-color: var(--color-surface-primary);
  cursor: pointer;
  gap: 0;

  @include transition(background-color);

  &:hover:not(.disabled) {
    background-color: var(--color-grey-light);
  }

  &:focus-visible {
    outline: 2px solid var(--color-primary-base);
    outline-offset: -2px;
  }
}

.selected {
  gap: map.get($spacing-scale, 's-1');
  background: linear-gradient(
      90deg,
      rgba(95, 91, 243, 0.08) 0%,
      rgba(95, 91, 243, 0.08) 100%
    ),
    var(--color-surface-primary);

  &:hover:not(.disabled) {
    background: linear-gradient(
        90deg,
        rgba(95, 91, 243, 0.12) 0%,
        rgba(95, 91, 243, 0.12) 100%
      ),
      var(--color-grey-light);
  }
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.content {
  display: flex;
  flex-direction: column;
  gap: map.get($spacing-scale, 's-1');
  flex: 1;
  min-width: 0;
}

.title {
  @include body-small-regular;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle {
  @include metadata-regular;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trailing {
  @include body-small-medium;
  color: var(--color-text-primary);
  flex-shrink: 0;
  text-align: right;
}

.checkIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}