// Overlay
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.overlay
    position: relative
    z-index: 0

    &:after
        content: ""
        position: absolute
        left: 0px
        top: 0px
        width: 100%
        height: 100%
        z-index: -1
        opacity: 0.75
        background-color: $eden-green

    &.dark

        &:after
            background-color: $eden-charcoal

    &.light

        &:after
            background-color: $eden-light-grey

    &.solid

        &:after
            opacity: 1

    &.circle

        &:after
            border-radius: 100%

    &.on-hover

        &:after, .content
            transition: all 0.5s ease

        &.fade

            &:after, .content
                opacity: 0

            &.solid

                &:hover

                    &:after, .content
                        opacity: 1

            &:hover

                &:after, .content
                    opacity: 0.75


        &.slide-right, &.slide-left, &.slide-up, &.slide-down

            &:hover

                &:after, .content
                    transform: none

        &.slide-right, &.slide-left

            &:after, .content
                transform: scale3d(0, 1, 1)

        &.slide-up, &.slide-down

            &:after, .content
                transform: scale3d(1, 0, 1)

        &.slide-right

            &:after, .content
                transform-origin: left

        &.slide-left

            &:after, .content
                transform-origin: right

        &.slide-up

            &:after, .content
                transform-origin: bottom

        &.slide-down

            &:after, .content
                transform-origin: top

        &.img-overlay
            display: inline-block

            .content
                position: absolute
                left: 0px
                top: 0px
                z-index: 1

            &:after
                z-index: 0
                height: 98.5%