.filters-container
  display: flex
  flex-direction: column
  gap: 8px

.filters-title
  color: var(--primary-color-text)
  font-size: 20px
  font-weight: 600

.filters-chips-container
  display: flex
  margin-bottom: 8px
  flex-wrap: wrap
  gap: 8px

@keyframes filter-chip-fade
  0%
    opacity: 1
    transform: rotateX(90deg)
  50%
    opacity: 0.5
    transform: rotateX(0deg)
  100%
    display: none
    opacity: 0
    transform: rotateX(90deg)

.filter-chip
  cursor: pointer
  border-radius: 16px
  font-weight: 500
  background: transparent
  border: 1px solid transparent

  &.hidden
    display: none

  &:not(.active-filter-chip)
    span
      width: 100%
      text-align: center

    &:hover
      transform: scale(1.03)

.state-filter-chip
  &.running
    color: var(--success-color-text)

    &.selected
      background-color: var(--success-color)

    &:not(.selected)
      border: 1px solid var(--success-color-text)

  &.failed
    color: var(--danger-color-text)

    &.selected
      background-color: var(--danger-color)

    &:not(.selected)
      border: 1px solid var(--danger-color-text)

  &.scheduled
    color: var(--info-color-text)

    &.selected
      background-color: var(--info-color)

    &:not(.selected)
      border: 1px solid var(--info-color-text)

  &.deploying
    color: var(--warning-color-text)

    &.selected
      background-color: var(--warning-color)

    &:not(.selected)
      border: 1px solid var(--warning-color-text)

  &.stopping
    color: var(--subtle-color-text)

    &.selected
      background-color: var(--subtle-color)

    &:not(.selected)
      border: 1px solid var(--subtle-color-text)

  &.inactive
    color: var(--neutral-color-text)

    &.selected
      background-color: var(--neutral-color)

    &:not(.selected)
      border: 1px solid var(--neutral-color-text)

.fake-state-filter-chip
  display: flex
  flex-direction: row
  background: #424b57
  border-radius: 16px
  padding: 0.55rem 0.75rem
  color: rgba(255, 255, 255, 0.87)
  align-items: center
  gap: 8px

  i:hover
    cursor: pointer

.collection-filter-chip
  color: var(--primary-color-text)

  &.selected
    background-color: var(--neutral-color)

  &.unselected
    border: 1px solid var(--neutral-color-text)
    background-color: transparent
