.modal
  position: relative
  display: flex
  flex-direction: column
  justify-content: center
  align-items: stretch
  padding: $modal-spacing
  width: 100%
  border: 0
  border-radius: $border-radius-large
  background-color: $white
  max-width: 500px
  margin-left: auto
  margin-right: auto
  margin-bottom: $modal-spacing
  box-shadow: boxShadow(large)
  @extend $normal

  for color in $modifiers-color
    $accentColor = lookup('$' + color)
    $textColor = isLight(color) ? $dark : $accentColor

    &.is-{color}
      _modal-color: $accentColor $textColor

  &.is-outlined
    border-width: $border
    border-style: solid
    background-color: alpha($white, 10%)

  &.is-fit
    padding: 1em

  &.is-rounded
    border-radius: 10em

.modal-header
  position: relative
  margin-bottom: $modal-spacing

.modal-title
  margin: 0

.modal-body
  display: flex
  position: relative
  padding: 0

  *
    margin-top: 0
    margin-bottom: 0

.modal-icon
  margin-{$dir-end}: $modal-spacing

.modal-footer
  display: flex
  margin-top: $modal-spacing

  >*
    margin-bottom: 0

.modal-dismiss
  position: absolute
  top: 0
  padding: 1em
  border: 0
  background-color: transparent
  {$dir-end}: 0
  cursor: pointer
  _icon-color: inherit

  &:focus
    outline: none

  &:hover
    _icon-color: $primary

.modal-container
  position: fixed
  top: 0
  right: 0
  left: 0
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 100vh
  background-color: alpha($black, 10%)
  z-index: 999

  &.is-hidden
    display: none

  &.is-visable
    display: flex