@import '../abstracts/variables';

.button-group-root {
    border-radius: var(--default-borderradius);
    display: inline-flex;

    .button-root {
        border-radius: var(--default-borderradius);
    }

    &.button-group-override-styles {
        .button {
            color: var(--palette-text-primary);
        }

        .button-root {
            background-color: inherit;
            box-shadow: none;
            border: none;

            &:hover, &:focus-visible {
                background-color: var(--palette-action-default-hover);
            }
        }
    }
}
.button-group-horizontal {
    &:not(.button-group-rtl) {
        > .button-root:not(:last-child), > :not(:last-child) .button-root {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        > .button-root:not(:first-child), > :not(:first-child) .button-root {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -1px;
        }
    }

    &.button-group-rtl {
        > .button-root:not(:last-child), > :not(:last-child) .button-root {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -1px;
        }

        > .button-root:not(:first-child), > :not(:first-child) .button-root {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
}

.button-group-vertical {
    flex-direction: column;
    .icon-button {
        width: 100%;
    }

    > .button-root:not(:last-child), > :not(:last-child) .button-root {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    > .button-root:not(:first-child), > :not(:first-child) .button-root {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        margin-top: -1px;
    }
}

.button-group-text {
    &.button-group-override-styles {
        .button-root {
            padding: 6px 8px;
        }

        &.button-group-horizontal {
            &:not(.button-group-rtl) {
                .button-root:not(:first-child), > :not(:first-child) .button-root {
                    border-left: 1px solid var(--palette-text-primary);
                }
            }

            &.button-group-rtl {
                .button-root:not(:first-child), > :not(:first-child) .button-root {
                    border-right: 1px solid var(--palette-text-primary);
                }
            }
        }

        &.button-group-vertical {
            .button-root:not(:last-child), > :not(:last-child) .button-root {
                border-bottom: 1px solid var(--palette-text-primary);
            }
        }

        @each $color in $palette-colors {
            &.button-group-text-#{$color} {
                .button-root {
                    color: var(--palette-#{$color});

                    &:hover, &:focus-visible {
                        background-color: var(--palette-#{$color}-hover);
                    }
                }

                &.button-group-horizontal {
                    &:not(.button-group-rtl) {
                        .button-root:not(:first-child), > :not(:first-child) .button-root {
                            border-left: 1px solid var(--palette-#{$color});
                        }
                    }

                    &.button-group-rtl {
                        .button-root:not(:first-child), > :not(:first-child) .button-root {
                            border-right: 1px solid var(--palette-#{$color});
                        }
                    }
                }

                &.button-group-vertical {
                    .button-root:not(:last-child), > :not(:last-child) .button-root {
                        border-bottom: 1px solid var(--palette-#{$color});
                    }
                }
            }
        }
    }
}

.button-group-outlined {
    &.button-group-override-styles {
        .button-root {
            padding: 5px 15px;
            border: 1px solid var(--palette-text-primary);
        }

        @each $color in $palette-colors {
            &.button-group-outlined-#{$color} .button-root {
                color: var(--palette-#{$color});
                border: 1px solid var(--palette-#{$color});

                &:hover, &:focus-visible {
                    background-color: var(--palette-#{$color}-hover);
                }
            }
        }
    }
}

.button-group-filled {
    box-shadow: var(--elevation-2);

    .button-root {
        box-shadow: none;

        &:hover, &:focus-visible {
            box-shadow: var(--elevation-4);
        }
    }

    &.button-group-override-styles {
        .button-root {
            background-color: var(--palette-action-default-hover);
            padding: 6px 16px;
        }

        &.button-group-horizontal {
            &:not(.button-group-rtl) {
                .button-root:not(:first-child), > :not(:first-child) .button-root {
                    border-left: 1px solid var(--palette-divider);
                }
            }

            &.button-group-rtl {
                .button-root:not(:first-child), > :not(:first-child) .button-root {
                    border-right: 1px solid var(--palette-divider);
                }
            }
        }

        &.button-group-vertical {
            .button-root:not(:first-child), > :not(:first-child) .button-root {
                border-top: 1px solid var(--palette-divider);
            }
        }

        @each $color in $palette-colors {
            &.button-group-filled-#{$color} {
                .button-root {
                    background-color: var(--palette-#{$color});
                    color: var(--palette-#{$color}-text);

                    &:hover, &:focus-visible {
                        background-color: var(--palette-#{$color}-darken);
                    }
                }

                &.button-group-horizontal {
                    &:not(.button-group-rtl) {
                        .button-root:not(:first-child), > :not(:first-child) .button-root {
                            border-left: 1px solid var(--palette-#{$color}-lighten);
                        }
                    }

                    &.button-group-rtl {
                        .button-root:not(:first-child), > :not(:first-child) .button-root {
                            border-right: 1px solid var(--palette-#{$color}-lighten);
                        }
                    }
                }

                &.button-group-vertical {
                    .button-root:not(:first-child), > :not(:first-child) .button-root {
                        border-top: 1px solid var(--palette-#{$color}-lighten);
                    }
                }
            }
        }
    }
}

.button-group-disable-elevation {
    box-shadow: none;
}

.button-group-root {
    &.button-group-text-size-small .button-root {
        padding: 4px 5px;
        font-size: 0.8125rem;

        &.icon-button .icon-root {
            font-size: 1.422rem;
        }
    }

    &.button-group-text-size-large .button-root {
        padding: 8px 11px;
        font-size: 0.9375rem;

        &.icon-button .icon-root {
            font-size: 1.641rem;
        }
    }

    &.button-group-outlined-size-small .button-root {
        padding: 3px 9px;
        font-size: 0.8125rem;

        &.icon-button {
            padding: 3px 9px;

            .icon-root {
                font-size: 1.422rem;
            }
        }
    }

    &.button-group-outlined-size-large .button-root {
        padding: 7px 21px;
        font-size: 0.9375rem;

        &.icon-button {
            padding: 7px 15px;

            .icon-root {
                font-size: 1.641rem;
            }
        }
    }

    &.button-group-filled-size-small .button-root {
        padding: 4px 10px;
        font-size: 0.8125rem;

        &.icon-button {
            padding: 4px 10px;

            .icon-root {
                font-size: 1.422rem;
            }
        }
    }

    &.button-group-filled-size-large .button-root {
        padding: 8px 22px;
        font-size: 0.9375rem;

        &.icon-button {
            padding: 8px 16px;

            .icon-root {
                font-size: 1.641rem;
            }
        }
    }
}

.button-group-root {
    .button-root.icon-button {
        padding-right: 12px;
        padding-left: 12px;

        .icon-root {
            font-size: 1.516rem;
        }

        &.ripple-icon {
            &:after {
                transform: scale(10,10);
            }

            &:active:after {
                transform: scale(0,0);
                opacity: 0.1;
                transition: 0s;
            }
        }
    }
}