@keyframes grab-background-color
  0%
    background-color: var(--warning)
  100%
    background-color: var(--base)

.admin-table
  margin-bottom: 1.5rem
  +media-breakpoint-down(sm)
    overflow-x: auto

.admin-table__table
  border-radius: .25rem
  width: 100%

.admin-table__header
  background-color: var(--background-semi-shade)
  border: solid 1px var(--border-shade)
  +border-radius(top, .25rem)

.admin-table__items
  +border(horizontal, solid 1px var(--border))

.admin-table-item__title
  +text-block(1.5rem 1.45)
  color: var(--default-text)

.admin-table__label
  +text-block(.75rem 1.4)
  text-align: center
  font-weight: 700
  color: var(--main)
  border: solid 1px var(--border-shade)
  white-space: nowrap
  height: 2rem
  padding-inline: .5rem
  .a-button.is-icon
    min-height: 1.25rem
    height: 1.25rem
    font-size: .75rem
    margin-left: .5rem
    padding-inline: .375rem
    background-color: var(--base)
    border-color: var(--border-shade)
    color: var(--default-text)

.admin-table__item
  transition: all .2s ease-out
  background-color: var(--base)
  &.is-retired
    background-color: var(--background-tint)
  &.is-retired:hover
    background-color: var(--background)
  &:last-child
    +border-radius(bottom, .25rem)
  &.sortable-chosen
    background-color: tint($warning, 80%)
  &:hover,
  .admin-table.is-grab &:hover
    background-color: tint($primary, 90%)
  &[draggable="false"]
    background-color: var(--base)
    animation: grab-background-color 1.25s ease 0s 1 normal none running

.admin-table__item-value
  padding: .375rem .75rem
  border: solid 1px var(--border)
  +text-block(.8125rem 1.45)
  &.is-text-align-center
    text-align: center
  .a-button
    margin-inline: .1875rem
  .is-button-group .a-button
    margin-inline: 0
  &.is-grab
    padding: 0

.admin-table__item-blank
  +text-block(.75rem 1.45)
  color: var(--muted-text)

.admin-table__item-logo-image
  border: solid 1px var(--border)
  width: 2.5rem
  border-radius: .25rem

.admin-table-item__body
  border-radius: .25rem
  background-color: var(--base)
  box-shadow: rgba(black, .2) 0 1px 4px
  overflow: hidden

.admin-table__user
  display: inline-flex
  align-items: center
  gap: .25rem .25rem

.admin-table__user-icon
  +size(2.125rem)
  display: inline-block
  flex: 0 0 2.125rem
  &:not(:last-child)
    margin-right: .5rem

.admin-table__user-login-name
  overflow-wrap: break-word
  word-wrap: break-word
  .admin-table__user:hover &
    text-decoration: underline

.admin-table__user-login-name
  color: var(--main-text)

.is-user-icon-xl
  +size(100% auto)
  margin-inline: auto
  border-radius: .25rem

.admin-table__item-block-link-container
  padding-top: .25em
  font-size: .75rem
  a
    +hover-link-reversal
    color: $danger

.admin-table.is-loading
  .admin-table__header
    border: solid 1px var(--border)
    background-color: var(--background)
  .admin-table__label
    border: solid 1px var(--border)
    text-align: center
    .a-placeholder
      height: 1.05rem
      width: 30%
      display: inline-block
      vertical-align: middle
  .admin-table__item-value
    height: 2.75rem
    border: solid 1px var(--border)
    pointer-events: none
    text-align: center
    vertical-align: middle
    .a-placeholder
      height: 1.1875rem
      width: 60%
      display: inline-block
      vertical-align: middle
