dbmedialab/reader-critics

.fab {
    pointer-events: none;
    overflow: hidden;
    position: fixed;
    bottom: 1.5rem;
    padding: 1rem;
    text-align: right;
    margin: 0 auto;
    z-index: 1;

    right: 0;
    @media (min-width: $content-max-width) {
        right: calc(50% - (5rem + (#{$content-max-width} / 2)));
    }

    #message {
        /*pointer-events: all; - "hide" button disabled for now */
        background-color: $color-success;
        color: $color-background;
        padding: 1rem 0 1rem 1rem;
        position: relative;
        top: -.5rem;
        left: -1rem;
        opacity: 0;
        box-shadow: $shadow-level-3;

        &.disabled {
            @include disappear;
            opacity: 0;
        }

        /* &::before { - "hide" button disabled for now
            @include material-icon;
            margin-right: .3rem;
            content: 'close';
            font-size: 1.5rem;
            position: relative;
            top: .30rem;
            cursor: pointer;
        } */

        &::after {
            border-style: solid;
            border-width: .5rem;
            border-color: transparent transparent transparent $color-success;
            content: '';
            display: inline-block;
            position: relative;
            right: -1rem;
            top: .1rem;
            cursor: pointer;
        }
    }

    a {
        pointer-events: all;
        position: relative;
        font-size: 0;
        color: transparent;

        &::before {
            @include material-icon;
            background-color: $color-success;
            color: $color-background;
            font-size: 2rem;
            margin-right: .3rem;
            display: inline-block;
            border-radius: 3rem;
            position: relative;
            padding: 1.5rem;
            content: 'done';
            cursor: pointer;
            box-shadow: $shadow-level-3;
        }
    }

    &.disabled {
        a {
            transition: bottom $speed-appear;
            bottom: -8rem;
        }
    }

    &.enabled {
        a {
            transition: bottom $speed-disappear;
            bottom: 0;
        }

        #message {
            @include appear;
            opacity: 1;

            &.disabled {
                @include disappear;
                opacity: 0;
            }
        }
    }
}