.lab-item-card
  display: flex
  flex-grow: 1
  max-height: 80px
  min-height: 80px
  justify-content: space-between
  align-items: center
  background-color: #1B2B34
  border-radius: 4px
  border: 1px solid var(--primary-color-border)
  cursor: pointer
  position: relative

  &:hover
    .lab-state-buttons
      transform: translateX(0)

.lab-group
  width: 180px
  padding-left: 12px
  font-weight: 700
  display: flex
  text-align: center
  border: 1px solid var(--primary-color-border)
  border-radius: 4px 6px 6px 4px
  margin: -1px
  align-self: stretch
  align-items: center
  p
    margin: 0

.lab-name
  height: 100%
  display: flex
  flex-direction: column
  justify-content: center
  flex: 3
  padding-left: 1em

  p
    margin: 0

.lab-state
  display: flex
  min-width: 150px
  padding: 0 16px 0 16px
  text-align: center
  border: 1px solid var(--primary-color-border)
  border-radius: 6px 4px 4px 6px
  margin: -1px
  align-self: stretch
  align-items: center
  position: relative
  overflow: hidden

  .lab-state-buttons
    position: absolute
    bottom: 0
    top: 0
    left: 0
    right: 0
    border: 1px solid var(--primary-color-border)
    border-radius: 6px 4px 4px 6px
    margin: -1px
    background-color: #1A2B34
    display: flex
    justify-content: space-evenly
    align-items: center
    z-index: 2
    transform: translateX(100%)
    transition: transform ease 0.2s

    .p-button
      background-color: transparent
      border: none
      padding: 0

  .lab-state-label
    display: flex
    border-radius: 4px
    text-align: center
    transition: margin-right ease 0.3s
    flex-direction: column
    justify-content: center
    align-items: center
    height: 100%
    gap: 8px

    .lab-state-label-icon
      width: 130px

    .lab-state-date
      color: var(--primary-color-text)
      display: flex
      align-items: center
      font-size: 10pt

      span
        padding-left: 4px
