GetColor!

@import 'systemDefaults'
@import 'breakpoints'

@mixin flex-center()
    display: flex
    justify-content: center
    align-items: center
    flex-direction: column

@mixin flex-center2()
    display: flex
    align-items: center

body, html
    background: $background-color
    color: $text-color
    font-family: 'Montserrat', sans-serif
    height: 100vh
    min-width: 10rem
    padding: 0
    margin: 0
    overflow: hidden

.wrapper
    @include flex-center()
    height: 100%
    transition: $speed

.app
    @include flex-center()
    border: solid 1px rgba($frames-color, .1)
    background: rgba($frames-color, .1)
    transition: $speed
    border-radius: 2%
    padding: 1.5rem

    &:active
        transform: translateY(10px)

    &:hover
        border: solid 1px rgba($frames-color, .2)
        background: rgba($frames-color, .2)
        cursor: pointer

    &__name
        display: block
        font-size: 1.5rem
        margin: 1rem 0 0 0

    &__description
        width: 15rem
        line-height: 1.4rem
        font-size: 0.9rem
        margin-bottom: 0

    &__icon
        @include flex-center2()
        justify-content: center
        line-height: 256px
        font-size: 4rem
        text-align: center
        padding: 1.5rem 1rem
        background: $icon-color
        border-radius: 25%

.message
    @include flex-center2()
    justify-content: space-between
    content: ""
    border: solid 1px rgba($message-color, .8)
    background: rgba($message-color, .8)
    border-radius: 1%
    position: absolute
    padding: 10px
    transition: $speed
    top: -5rem
    left: calc(50% - 8.3rem);
    width: 15rem
    height: 50px

    &__text
        padding: 0 0.6rem
        font-weight: 700
        font-size: 0.7rem
        text-transform: uppercase

    &__btn-close
        cursor: pointer

    &__btn-close:active
        color: rgba($frames-color, .1)