@import "../styles/base/fn.wxss";

.fab-button-style(@theme, @color) {
    &--@{theme} &__action,
    &--@{theme} &__button,
    &--@{theme} &__button--disabled {
        background-color: @color !important;
    }
}

.@{wuxClassNamePrefix}-fab-button {
    position: fixed;
    z-index: 1500;

    &--center {
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    &--topLeft {
        left: 15px;
        top: 15px;
    }

    &--topRight {
        right: 15px;
        top: 15px;
    }

    &--bottomLeft {
        left: 15px;
        bottom: 15px;
    }

    &--bottomRight {
        right: 15px;
        bottom: 15px;
    }

    &--vertical&--topLeft &__label,
    &--vertical&--bottomLeft &__label {
        left: 60px;
    }

    &--vertical&--center &__label,
    &--vertical&--topRight &__label,
    &--vertical&--bottomRight &__label {
        right: 60px;
    }

    &__action {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        z-index: 1500;
        background-color: @balanced;
        color: #fff;
        overflow: visible;
        transition-duration: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
        right: 0;
        bottom: 0;
        position: relative;

        &--hover {
            transition-duration: 0s;
            opacity: .8 !important;
        }

        &--hide-shadow {
            box-shadow: none !important;
        }
    }

    &__icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1;
    }

    &__text {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1;
        transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);

        &--rotate {
            transform: scale(1) rotate(135deg);
        }
    }

    &__button {
        .button-reset();
        width: 40px;
        height: 40px;
        opacity: 0;
        color: #fff;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: visible;
        background-color: @balanced !important;
        transition-duration: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
        width: 100%;
        height: 100%;

        &--hover {
            transition-duration: 0s;
            opacity: .8 !important;
        }

        &--disabled {
            opacity: .3 !important;
        }

        &--hide-shadow {
            box-shadow: none !important;
        }
    }

    &__label {
        position: absolute;
        top: 50%;
        padding: 4px 10px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 3px;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: none;
        white-space: nowrap;
        opacity: 0;
        box-sizing: border-box;
        transform: translate3d(0, -50%, 0);
        transition: all 0.3s;
    }

    &--vertical&--opened &__label {
        opacity: 1;
    }

    &__backdrop {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: 0 0;
    }

    .fab-button-style(light, #ddd);
    .fab-button-style(stable, #b2b2b2);
    .fab-button-style(positive, @positive);
    .fab-button-style(calm, @calm);
    .fab-button-style(assertive, @assertive);
    .fab-button-style(balanced, @balanced);
    .fab-button-style(energized, @energized);
    .fab-button-style(royal, @royal);
    .fab-button-style(dark, @dark);
}