.modal
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    display: flex
    justify-content: center
    align-items: flex-start
    background-color: $transDark
    overflow: auto
    z-index: 99999

    &-panel
        position: relative
        width: 500px
        margin: 100px 0
        max-width: 100%
        border-radius: $border-radius
        background-color: $white

    &-header
        padding: multiple($padding, 2)
        border-bottom: 1px solid $shadow

    &-title
        margin: 0

    &-body
        padding: $padding multiple($padding, 2)

    &-footer
        display: flex
        justify-content: space-between
        flex-direction: row-reverse
        padding: $padding
        background-color: $shadow

    &-dismiss
        position: absolute
        top: 0
        {$end-direction}: 0
        padding: $padding
        _icon-color: $gray
        &:hover
            _icon-color: $red

    &.is-hidden
        display: none

    &.is-visable
        display: flex

    &.is-clear
        .modal-panel
            background-color: $shadow
            color: $white