palette = json('../assets/palette.json', {hash: true})

@keyframes focus
  0%
    box-shadow 0 0 0.0em 0.2em #F57900
  15%
    box-shadow 0 0 0.25em 0.25em #F57900
  30%
    box-shadow 0 0 0.0em 0.2em #F57900

body
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #729FCF
  background-color #262626
  margin-top 60px

  [aria-hidden]
    display none

  svg.icon
    border 0.2em
    width 1em
    height 1em
    fill currentColor

  .form-aligned
    .form-row
      .form-label
        width 40%

      .form-input
        width 60%

  div.color-sample
    height 1em
    width 2em
    display inline

    for colorname, value in palette.colors
      &[data-color={colorname}]
        background-color value !important

  :focus
    box-shadow 0 0 0.2em 0.2em #F57900
    animation-name focus
    animation-duration 3s
    animation-iteration-count infinite

  button
    background-color #090909
    color #729FCF
    border solid #FFFFFF 0.2em
    border-radius 0.3em

    &.info
      border 0.2em solid #729FCF

    &.success
      border 0.2em solid #8AE234

    &.warning
      border 0.2em solid #FCAF3E

    &.error
      border 0.2em solid #EF2929

  input
    &.info
      border 0.2em solid #729FCF

    &.success
      border 0.2em solid #8AE234

    &.warning
      border 0.2em solid #FCAF3E

    &.error
      border 0.2em solid #EF2929

  [role="dialog"]
    z-index 1000
    width 75vw
    left 12.5vw
    top 20vh

    background-color #090909
    border-radius 1rem
    box-shadow 0 0 1rem 1rem #EEEEEC
    position fixed

    &.big
      width 90vw
      height 90vh
      top 5vh
      left 5vw
      overflow scroll

    &.info
      box-shadow 0 0 1rem 1rem #729FCF

    &.success
      box-shadow 0 0 1rem 1rem #8AE234

    &.warning
      box-shadow 0 0 1rem 1rem #FCAF3E

    &.error
      box-shadow 0 0 1rem 1rem #EF2929

    header
      overflow scroll
      border-bottom 0.2em white
      width 100%
      height 2em

    main
      width 100%

    footer
      border-top 0.2em white
      width 100%
      height 2em
