@use "../../wwwroot/scss/variables" as *;

.dial-button {
    --bb-dial-list-zindex: #{$bb-dial-list-zindex};
    --bb-dial-item-padding: #{$bb-dial-item-padding};
    --bb-dial-item-hover-bg: #{$bb-dial-item-hover-bg};
    --bb-dial-item-margin: #{$bb-dial-item-margin};
    --bb-dial-item-width: #{$bb-dial-item-width};
    --bb-dial-item-height: #{$bb-dial-item-height};
    --bb-dial-item-radius: #{$bb-dial-item-radius};
    --bb-dial-item-shadow: #{$bb-dial-item-shadow};
    --bb-dial-list-radial-offset: #{$bb-dial-list-radial-offset};
    position: relative;
    display: inline-flex;

    .dial-list {
        overflow: hidden;
        position: absolute;
        z-index: var(--bb-dial-list-zindex);
        pointer-events: none;
        display: flex;

        .dial-list-content {
            display: flex;
            flex-wrap: nowrap;
        }

        .dial-item {
            pointer-events: auto;
            margin: var(--bb-dial-item-margin);
            padding: var(--bb-dial-item-padding);
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            background-color: var(--bs-body-bg);
            border: var(--bs-border-width) solid var(--bs-border-color);
            width: var(--bb-dial-item-width);
            height: var(--bb-dial-item-height);
            border-radius: var(--bb-dial-item-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            box-shadow: var(--bb-dial-item-shadow);
            transition: background-color .3s linear, border-color .3s linear;

            &:hover {
                background-color: var(--bb-dial-item-hover-bg);
            }
        }

        &:not(.show) {
            visibility: hidden;
        }
    }

    &[data-bb-placement*="top"] {
        .dial-list {
            top: var(--bb-dial-list-vertical-offset);
            left: var(--bb-dial-list-horizontal-offset);
        }
    }

    &[data-bb-placement*="bottom"] {
        .dial-list {
            bottom: var(--bb-dial-list-vertical-offset);
            left: var(--bb-dial-list-horizontal-offset);
        }
    }

    &[data-bb-placement="middle-end"] {
        .dial-list {
            top: var(--bb-dial-list-vertical-offset);
            right: var(--bb-dial-list-horizontal-offset);
        }
    }

    &[data-bb-placement="middle-center"] {
        .dial-list {
            top: var(--bb-dial-list-vertical-offset);
            left: var(--bb-dial-list-horizontal-offset);
        }
    }

    &[data-bb-placement="middle-start"] {
        .dial-list {
            top: var(--bb-dial-list-vertical-offset);
            left: var(--bb-dial-list-horizontal-offset);
        }
    }

    &[data-bb-placement*="top"] {
        .dial-list-content {
            flex-direction: column;
            height: var(--bs-dial-list-height);
        }
    }

    &[data-bb-placement*="bottom"] {
        .dial-list-content {
            flex-direction: column;
            height: var(--bs-dial-list-height);
            flex-direction: column-reverse;
        }
    }

    &[data-bb-placement="middle-end"] {
        .dial-list-content {
            flex-direction: row-reverse;
        }
    }

    &.is-radial {
        .dial-list {
            width: calc(var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width));
            height: calc(var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height));
            --bb-dial-item-margin: 2px;

            .dial-list-content {
                position: relative;
                height: inherit;
                width: inherit;
                border-radius: 100%;

                .dial-item {
                    position: absolute;
                    transform: rotate(var(--bb-dial-item-angle)) translate(var(--bb-dial-radial-radius)) rotate(calc(-1 * var(--bb-dial-item-angle)));
                }
            }
        }

        &[data-bb-placement="top-start"] {
            .dial-list {
                border-bottom-right-radius: 100%;
            }
        }

        &[data-bb-placement="top-center"] {
            .dial-list {
                border-bottom-left-radius: 100%;
                border-bottom-right-radius: 100%;
                width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
                left: var(--bb-dial-list-horizontal-offset);
            }

            .dial-item {
                left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
            }
        }

        &[data-bb-placement="top-end"] {
            .dial-list {
                border-bottom-left-radius: 100%;
                right: 0;
            }

            .dial-item {
                right: 0;
            }
        }

        &[data-bb-placement="middle-start"] {
            .dial-list {
                border-top-right-radius: 100%;
                border-bottom-right-radius: 100%;
                height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
                top: var(--bb-dial-list-vertical-offset);
            }

            .dial-item {
                top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
            }
        }

        &[data-bb-placement="middle-center"] {
            .dial-list {
                border-radius: 50%;
                width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
                height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
                top: var(--bb-dial-list-vertical-offset);
                left: var(--bb-dial-list-horizontal-offset);
            }

            .dial-item {
                top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
                left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
            }
        }

        &[data-bb-placement="middle-end"] {
            .dial-list {
                border-top-left-radius: 100%;
                border-bottom-left-radius: 100%;
                height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
                top: var(--bb-dial-list-vertical-offset);
                right: 0;
            }

            .dial-item {
                top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
            }
        }

        &[data-bb-placement="bottom-start"] {
            .dial-list {
                border-top-right-radius: 100%;
                bottom: 0;
                left: 0;
            }

            .dial-item {
                bottom: 0;
                left: 0;
            }
        }

        &[data-bb-placement="bottom-center"] {
            .dial-list {
                border-top-left-radius: 100%;
                border-top-right-radius: 100%;
                width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
                bottom: 0;
                left: var(--bb-dial-list-horizontal-offset);
            }

            .dial-item {
                bottom: 0;
                left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
            }
        }

        &[data-bb-placement="bottom-end"] {
            .dial-list {
                border-top-left-radius: 100%;
                bottom: 0;
                right: 0;
            }

            .dial-item {
                bottom: 0;
                right: 0;
            }
        }
    }
}

.bb-animation-fadein {
    animation: .2s cubic-bezier(0.42, 0, 1, 1) 0s 1 normal none running FadeIn
}

.bb-animation-fadeout {
    animation: .2s cubic-bezier(0, 0, 0.58, 1) 0s 1 normal none running FadeOut
}

[data-bs-theme='dark'] .dial-button {
    --bb-dial-item-hover-bg: #{$bb-dial-item-hover-bg-dark};
}

@keyframes FadeIn {
    0% {
        filter: alpha(opacity=0);
        opacity: 0
    }

    100% {
        filter: alpha(opacity=100);
        opacity: 1
    }
}

@keyframes FadeOut {
    from {
        filter: alpha(opacity=100);
        opacity: 1
    }

    to {
        filter: alpha(opacity=0);
        opacity: 0
    }
}
