// Modal
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.modal
    width: 100%
    height: 100%
    position: fixed
    left: 0px
    top: 0px
    display: none
    overflow: auto
    z-index: 99

    &.is-open
        display: block

    &>.content
        background-color: $eden-green
        color: $eden-light-grey

        &>.close.inside
            color: $eden-light-grey

    &.light
        background-color: none

        &>.content
            background-color: $eden_light_grey
            color: $eden-charcoal

            &>.close.inside
                color: $eden-charcoal

            &>.close.outside
                color: $eden-light-grey

    &.dark
        background-color: none

        &>.content
            background-color: $eden-charcoal
            color: $eden-light-grey

            &>.close.inside
                color: $eden-light-grey

    &.dark-bg
        background-color: rgba(0, 0, 0, 0.75)

        &>.content

            &>.close.outside
                color: $eden-light-grey
    &.light-bg
        background-color: rgba(255, 255, 255, 0.75)

        &>.content

            &>.close.outside
                color: $eden-charcoal

    &.eden-bg
        background-color: rgba($eden-green, 0.75)

        &>.content

            &>.close.outside
                color: $eden-light-grey

    &.shadow

        &>.content
            box-shadow: 0px 0px 100px -10px rgba(0, 0, 0, 0.75)

    &.rounded

        &>.content
            border-radius: 7.5px

    &.border

        &>.content
            border: 1px solid black

    &.top

        &>.content
            margin: 0% auto 7.5% auto
            border-top-left-radius: 0px
            border-top-right-radius: 0px
            border-top: none

            &>.close.outside
                right: -1.5em
                top: 0.5em

    &>.content
        position: relative
        width: 75%
        margin: 7.6% auto

        &>.close
            position: absolute
            opacity: 0.5
            transition: all 0.3s ease-in-out
            color: $eden-green
            background-color: transparent

            &:hover
                opacity: 1
                cursor: pointer

            &.dark
                color: $eden-charcoal !important
                background-color: transparent !important

            &.light
                color: $eden-light-grey !important
                background-color: transparent !important

            &.inside
                right: 15px
                top: 12px

            &.outside
                right: -1.25em
                top: -1.25em

            &.corner
                right: -1em
                top: -1em
                background-color: black
                border: 1px solid white
                border-radius: 100%
                color: white
                width: 2em
                height: 2em
                text-align: center
                opacity: 1
                padding-top: 2px
                transition: all 0.3s ease-in-out

                span
                    vertical-align: middle

                &:hover
                    background-color: lighten(black, 20)
                    cursor: pointer

            &.rotate
                right: -2em
                top: 1em
                transform: rotate3d(0, 0, 1, 90deg)