// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.box
  padding: $gap
  margin: $gap 0
  border-radius: $radius
  background-color: $white

  +dark-mode
    background-color: $black
    color: inherit

  &.is-inline
    display: inline-block
    vertical-align: middle
  &.is-big
    padding: $gap*2
  &.is-grouped
    border-radius: 0
    border-top-left-radius: $radius
    border-top-right-radius: $radius
    margin-top: 0
    margin-bottom: 0
    & ~ .box
      border-radius: 0
      &:last-child
        border-bottom-left-radius: $radius
        border-bottom-right-radius: $radius
      &:not(:first-child)
        margin-top: 0
      &:not(:last-child)
        margin-bottom: 0
    &.has-border
      &, & ~ .box:not(:last-child)
        border-bottom: 1px solid rgba($black, .05)
  &.has-border
    border-style: solid
    border-width: .065rem
    border-color: $border

    +dark-mode
      border-color: $border-dark
      color: $text-color-dark

  &.has-background-light
    background-color: $light-matte
    +dark-mode
      background-color: $background-dark
  // use stack shade for boxes in boxes. if the top box has a background-color assigned,
  // underlying boxes will create darker shades to indicate leveling.
  &.has-background-stack-shade
    background-color: rgba($black, .075)
    color: $black
  &.has-background-blue,
  &.has-background-info
    background-color: $blue
    color: $white
  &.has-background-red,
  &.has-background-danger
    background-color: $red
    color: $white
  &.has-background-dark
    background-color: $dark
    color: $white
  &.has-background-black
    background-color: $black
    color: $white
  &.has-background-green,
  &.has-background-success
    background-color: $green
  &.has-background-yellow,
  &.has-background-warning
    background-color: $yellow

  &.has-inset-shadow
    box-shadow: inset 0px 2px 4px rgba($black, .1)
    &.has-background-red,
    &.has-background-dark,
    &.has-background-black
      box-shadow: inset 0px 2px 4px rgba($black, .4)

  &.has-shadow
    box-shadow: 0px 2px 4px rgba($black, .1)
    &.has-background-red,
    &.has-background-dark,
    &.has-background-black
      box-shadow: 0px 2px 4px rgba($black, .4)

  &.has-background-fade
    position: relative
    & > *
      position: relative
      z-index: 2
    &:after
      content: ""
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: 1
      background-image: linear-gradient(rgba($white, 0), rgba($black, .05))

  // additional space modifiers3
  &.has-addon
    position: relative
    padding-top: $gap * 3

    .box-addon
      position: absolute
      top: 0
      left: 0
      width: auto
      padding: $gap/2 $gap
      margin-bottom: $gap
      background-color: $light
      font-size: .7em
      border-radius: $radius 0 $radius 0

  &-title
    font-size: 1.1em
    border-bottom: .065rem solid shade($light, .1)
    border-radius: $radius $radius 0 0
    background-color: $light
    margin: 0
    padding: $gap
    color: $dark
    box-shadow: inset 0 .062rem 0 rgba($black, .1)

    +dark-mode
      color: tint($dark, .5)

    a
      color: inherit
      &.is-icon
        display: inline-flex
        justify-content: center
        align-items: center
        width: $gap * 2
        height: $gap * 2
        border-radius: $gap
        text-decoration: none
        i
          pointer-events: none
        &:active
          background-color: rgba(0, 0, 0, .1)
          +dark-mode
            background-color: rgba(255, 255, 255, .2)

    &.is-red
      background-color: tint($red, .75)
      border: .065rem solid $red
      color: $black
