@import "custom-theme"

mat-card
  padding: 0 !important
  width: max-content

  &.x-centered
    margin: auto

  &.y-centered
    margin-top: 50vh
    position: relative
    transform: translateY(-70%)

  mat-card-header
    background-color: $color-primary
    color: $light-primary-text
    padding: 16px 16px 0 16px
    border-radius: 4px 4px 0 0

  mat-card-content
    margin-top: 16px
    padding: 0 16px

    mat-form-field
      width: 100%

  mat-card-actions
    display: flex !important
    padding: 0 24px 16px 24px !important
    flex-direction: row
    justify-content: flex-end
    gap: 1rem

    button
      text-transform: uppercase
      letter-spacing: 1.25px

table
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)

  th
    background-color: $color-primary
    color: $light-primary-text !important
    text-transform: uppercase

    &:first-child
      border-top-left-radius: 4px

    &:last-child
      border-top-right-radius: 4px

  th, td
    padding: 0 1rem !important

  tr.detail-row
    height: 0

  tr.entity-row.can-expand:not(.expanded-row):hover
    background-color: map-get($theme-primary, 50)

  tr.entity-row.can-expand:not(.expanded-row):active
    background-color: map-get($theme-primary, 100)

  .entity-row td
    border-bottom-width: 0

  .entity-detail
    overflow: hidden
    display: flex

  .disabled button
    display: none

button
  text-transform: uppercase
  font-weight: 500

  &.mat-accent
    color: white !important

div.empty
  color: $dark-secondary-text
  margin: auto

.action-bar
  display: flex
  flex-direction: row
  justify-content: flex-end
  padding: 1.5rem 3rem

  button
    margin-left: 1rem

.alert p
  margin-bottom: 0

.dark-background
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  background-color: black
  opacity: 0.05

.darker-background
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  background-color: black
  opacity: 0.4
