@import "../Shared.sass"

.Blob
  margin-top: 0.5em
  border-radius: 0.5em
  display: inline-block
  box-sizing: border-box
  cursor: default
  margin-left: 0.25em
  margin-right: 0.25em

  &.Blob-clickable
    cursor: pointer

    &:hover
      color: $blob-foreground-clickable-hover

  &.Blob-gray
    background-color: $blob-background
    color: $blob-foreground

    &.Blob-clickable:hover
      background-color: $blob-background-hover

  &.Blob-green
    background-color: $green-1
    color: $green-6

    &.Blob-clickable:hover
      background-color: $green-2

  &.Blob-blue
    background-color: $blue-1
    color: $blue-6

    &.Blob-clickable:hover
      background-color: $blue-2

  &.Blob-cyan
    background-color: $cyan-1
    color: $cyan-6

    &.Blob-clickable:hover
      background-color: $cyan-2

  &.Blob-yellow
    background-color: $yellow-1
    color: $yellow-6

    &.Blob-clickable:hover
      background-color: $yellow-2

  &.Blob-red
    background-color: $red-1
    color: $red-6

    &.Blob-clickable:hover
      background-color: $red-2

  &.Blob-indigo
    background-color: $indigo-1
    color: $indigo-6

    &.Blob-clickable:hover
      background-color: $indigo-2


  &.Blob-fill-on-any
    display: block

  @media screen and (max-width: $mobile-max)
    &.Blob-fill-on-mobile
      display: block

  @media screen and (max-width: $tablet-max)
    &.Blob-fill-on-tablet
      display: block

  @media screen and (max-width: $desktop-max)
    &.Blob-fill-on-desktop
      display: block

  .Blob-body
    display: flex
    flex-direction: row
    border-radius: inherit

  .BlobText
    padding: 0.5em
    min-width: 1ch

    &.BlobText-centered
      text-align: center

    &.BlobText-text-secondary
      opacity: 0.75

    .BlobTextLine
      &.BlobTextLine-secondary
        opacity: 0.5

      &:not(:last-child)
        padding-bottom: 0.2em

  input.BlobInput
    font: inherit
    background-color: $blob-background-dark
    color: inherit
    border: none
    padding: 0.5em
    border-radius: inherit

    &:not(:first-child)
      border-bottom-left-radius: 0
      border-top-left-radius: 0

    &:not(:last-child)
      border-bottom-right-radius: 0
      border-top-right-radius: 0

  div
    text-wrap: avoid

.BlobGroup
  display: inline-block

  .Blob:not(:first-child)
    margin-left: 0
    border-top-left-radius: 0
    border-bottom-left-radius: 0

  .Blob:not(:last-child)
    margin-right: 0
    border-top-right-radius: 0
    border-bottom-right-radius: 0