@use "../../../styles/variables.sass"

.CowCard
  .Bloodline,
  // This additional specificity variant is needed to override the global .card-list styles
  .card-list & ul.Bloodline
    display: flex
    margin: 1em 0

    li
      $indicator-size: 1.25em
      background: #000
      border-radius: 50%
      border: solid 1px #000
      height: $indicator-size
      margin-bottom: 0
      margin-right: 0.5em
      margin-top: 0
      width: $indicator-size

      &.blue
        background: variables.$cow-color-blue
      &.brown
        background: variables.$cow-color-brown
      &.green
        background: variables.$cow-color-green
      &.orange
        background: variables.$cow-color-orange
      &.purple
        background: variables.$cow-color-purple
      &.white
        background: variables.$cow-color-white
      &.yellow
        background: variables.$cow-color-yellow

  &.is-purchased
    ul.Bloodline
      margin: 0 0 1em