// reusable: cell internal padding and color

$font-size-large: 24px
$font-size-medium: 20px
$font-size-small: 16px

$bg-hue: 15deg
$fg-hue: 280deg

$bg-hud: oklch(0.8 0.05 $bg-hue)
$bg-page: oklch(0.2 0.05 $bg-hue)
$bg-tile-insetbutton: oklch(0.7 0.05 $bg-hue)
$bg-tile-insetbutton-hover: oklch(0.95 0.03 $bg-hue)
$bg-tile: oklch(0.8 0.05 $bg-hue)
$fg-shadow: oklch(0.05 0.05 $fg-hue)

$padding-between: 1em
$padding-inside: $padding-between / 2

$border-radius: 2px


.large
  font-size: $font-size-large

.medium
  font-size: $font-size-medium

.small
  font-size: $font-size-small

@mixin cell-internal
  border-radius: $border-radius
  padding: $padding-inside
  box-sizing: border-box
  border: 1px $fg-shadow solid
  box-shadow: 4px 4px 4px 2px $fg-shadow

/* general layout */
body
  background-color: $bg-page

.hud
  margin-bottom: $padding-between
  background-color: $bg-hud
  padding: $padding-inside

.tiles
  display: flex
  flex-flow: row wrap
  column-gap: $padding-between
  row-gap: $padding-between
  justify-content: center
  align-items: start
  margin-bottom: 1em

/* tiles */
.tile
  display: block
  width: 360px
  @include cell-internal
  background-color: $bg-tile

/* action tiles */
.actions
  display: flex
  flex-flow: column
  column-gap: $padding-between

  .action
    border-radius: $border-radius
    padding: $padding-inside
    font-size: $font-size-medium
    display: flex
    flex-flow: row
    justify-content: space-between
    align-items: center
    .text
    .cost
      display: flex
      flex-flow: row

      img.icon
        height: 0.9em

    &.unavailable
      opacity: 30%

    &.available
      cursor: pointer
      box-sizing: content-box
      border: 1px $bg-tile-insetbutton solid

      &:hover
        background-color: $bg-tile-insetbutton-hover


/* hud layout */
.hud
  display: flex
  flex-flow: row
  justify-content: space-between
  align-items: center

  .message
    display: block

  .resources
    font-size: $font-size-medium
    display: flex
    flex-flow: row
    column-gap: $padding-between

/* icons */
img.icon
  height: 1em

/* lair tiles */
.tile
  .lair
    display: flex
    flex-flow: column
    row-gap: $padding-inside

    .agent
      $icon-dimension: 57px
      display: flex
      flex-flow: row
      column-gap: $padding-inside
      border-radius: $border-radius
      height: $icon-dimension

      .portrait
        background-color: $bg-tile-insetbutton
        border-radius: $border-radius
        width: $icon-dimension
        height: $icon-dimension

      .caption
        flex-grow: 1

        display: flex
        flex-flow: column
        justify-content: center
        row-gap: $padding-inside / 4


.progressBar
  position: relative
  padding: 0.15em

  .backdrop
    border-radius: $border-radius
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%

    background-color: $bg-tile-insetbutton

  .caption
    text-align: center
    position: relative
    color: #fff
    font-size: 0.7em
    height: 1em

  &.disabled
    .caption
      color: #000