@import 'assets/sass/modules/_fonts.sass'
@import "custom-theme"
@import "~material-design-icons/iconfont/material-icons.css"

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

    &.no-action
      padding: 0 24px 16px 24px !important

    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

  &.named-table mat-card-content
    margin: 0
    padding: 0

    table
      border: none
      box-shadow: none

      th
        border-radius: 0 !important

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)
  max-width: 90vw

  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 *
    display: none

mat-expansion-panel.table-title
  mat-expansion-panel-header
    background-color: $color-primary

    &:hover, &:focus
      background-color: $color-primary !important

    &.header-field .mat-form-field-flex
      background-color: white

      .mat-form-field-outline
        opacity: 1

        &:first-child
          opacity: 0

    mat-panel-title
      color: $light-primary-text !important
      font-weight: bold
      text-transform: uppercase

    mat-panel-description
      color: $light-primary-text

      mat-form-field
        display: inline

  &.mat-expanded mat-expansion-panel-header
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

  .mat-expansion-panel-body
    padding: 0 !important

  table
    width: 100%

    th
      border-top-left-radius: 0
      border-top-right-radius: 0

cre-mix-table.no-top-margin mat-expansion-panel
  margin-top: 0 !important

button
  text-transform: uppercase
  font-weight: 500

  &.mat-accent
    color: $light-primary-text !important

mat-form-field
  &.w-auto
    .mat-form-field-infix
      width: auto !important

  &.dark
    input
      caret-color: $light-primary-text !important

    mat-label, input
      color: $light-primary-text

    .mat-form-field-underline, .mat-form-field-ripple
      background-color: $light-primary-text !important

mat-slider
  width: 100%

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

  &.backward
    justify-content: flex-start

    button
      margin-left: 0
      margin-right: 1rem

.alert p
  margin-bottom: 0

.light-text
  color: rgba(0, 0, 0, 0.54)

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

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

.color-warning
  color: #fdd835

.color-green
  color: green