.floating {
    display: block;
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    text-align: center;
    line-height: 4.2em;
    background-color: @color-light-bg;
    outline: none;
    transition: box-shadow .3s ease, background-color .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .25) inset;

    i {
        font-size: 130%;
        color: @font-default-color;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 1);
    }

    &.floating-default {
        background-color: @base-default-color;

        &:hover {
            background-color: lighten(@base-default-color, 5%);
        }
    }

    &.floating-primary {
        background-color: @base-primary-color;

        &:hover {
            background-color: lighten(@base-primary-color, 5%);
        }
    }

    &.floating-cobalt {
        background-color: @base-cobalt-color;

        &:hover {
            background-color: lighten(@base-cobalt-color, 5%);
        }
    }

    &.floating-success {
        background-color: @base-success-color;

        &:hover {
            background-color: lighten(@base-success-color, 5%);
        }
    }

    &.floating-danger {
        background-color: @base-danger-color;

        &:hover {
            background-color: lighten(@base-danger-color, 5%);
        }
    }

    &.floating-alert {
        background-color: @base-alert-color;

        &:hover {
            background-color: lighten(@base-alert-color, 5%);
        }
    }

    &.floating-notice {
        background-color: @base-notice-color;

        &:hover {
            background-color: lighten(@base-notice-color, 5%);
        }
    }

    &.floating-force {
        background-color: @base-force-color;
        color: @base-white-color;

        &:hover {
            background-color: lighten(@base-force-color, 5%);
        }
    }

    &.floating-default,
    &.floating-primary,
    &.floating-cobalt,
    &.floating-success,
    &.floating-danger,
    &.floating-alert,
    &.floating-notice,
    &.floating-force {
        i {
            color: @base-white-color;
        }
    }
}
