@import "../res/colors"

.Tabs-container
  background-color: $color-background-elevated

  &.Tabs-large
    text-align: center
    font-size: 175%

  .Tabs-element
    display: inline-block
    padding: 0.25em 0.7ch
    cursor: pointer
    user-select: none

  .Tabs-active
    border-bottom: 1px solid $color-foreground

  .Tabs-bold
    font-family: 'Bitstream Vera Serif', 'Lucida Fax', serif
    font-weight: 600

.Page
  max-width: 800px
  margin: 0.25em auto


.Dialog-overlay
  background-color: rgba(0, 0, 0, 0.5)
  position: fixed
  left: 0
  top: 0
  right: 0
  bottom: 0
  overflow-y: scroll

.Dialog-main
  max-width: 640px
  margin: 4em auto
  // background-color: #202020
  color: #ddd
  outline: none
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5)

  .Card
    margin: 0

.Dialog-title
  font-weight: 800
  font-size: 200%
  text-align: center
  padding: 0.25em 0.5ch

.Dialog-body
  margin-bottom: 0

.Dialog-footer
  border-top: solid 1px #000

.Dialog-container
  background-color: $color-background

.Dialog-header
  font-size: 140%
  font-weight: bold
  text-align: center
  padding: 0.1em 0
  background-color: $color-background-elevated
  border-bottom: solid 1px #000

.Dialog-footer
  display: flex
  flex-direction: row

  button
    flex-grow: 4
    text-align: center
    font: inherit
    padding: 0.5em 1.5ch
    background-color: $color-background-elevated
    color: $color-foreground
    border: none
    cursor: pointer
    border-bottom: solid 1px #000

    &:hover, &:active
      background-color: $color-background-elevated2
      color: $color-foreground-elevated

    &:not(:last-of-type)
      border-right: solid 1px #000