/**
 * Button Group
 */

.button-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    box-sizing: border-box;

    .button {
        position: relative;
        flex: 0 1 auto;
        z-index: 0;
        margin-right: 0;
        font-size: var(--button-group--font-size, var(--button--font-size));
        padding: var(
            --button-group--padding,
            var(--button-group--padding-top, var(--button--padding-top))
                var(--button-group--padding-right, var(--button--padding-right))
                var(--button-group--padding-bottom, var(--button--padding-bottom))
                var(--button-group--padding-left, var(--button--padding-left))
        );

        &:hover,
        &:focus,
        &:active,
        &.-active {
            z-index: 1;
        }

        &.-circle {
            border-radius: 100%;
            width: var(--button--circle--size);
            height: var(--button--circle--size);
            padding: 0;
        }
    }

    > .button:first-child {
        margin-left: 0;
    }

    &.-block {
        display: flex;
        flex-basis: 100%;

        > .button {
            flex-basis: 100%;
        }
    }

    > .button,
    > .button-group > .button,
    > [class$='-wrapper'] .button {
        border-radius: 0;
    }

    // Reset rounded corners
    &:not(.-vertical) {
        > .button:last-child,
        > [class$='-wrapper']:last-child > * > .button:last-child {
            border-top-right-radius: var(
                --button-group--border-top-right-radius,
                var(--button--border-top-right-radius)
            );
            border-bottom-right-radius: var(
                --button-group--border-bottom-right-radius,
                var(--button--border-bottom-right-radius)
            );
        }

        > .button:first-child,
        > [class$='-wrapper']:first-child > * > .button:first-child {
            border-top-left-radius: var(
                --button-group--border-top-left-radius,
                var(--button--border-top-left-radius)
            );
            border-bottom-left-radius: var(
                --button-group--border-bottom-left-radius,
                var(--button--border-bottom-left-radius)
            );
        }

        > .button:not(:last-child),
        > .button-group:not(:last-child) .button,
        > [class$='-wrapper']:not(:last-child) > * > .button,
        > .button-group:not(:last-child) [class$='-wrapper'] > * > .button {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
        }

        > .button:not(:first-child),
        > .button-group:not(:first-child) .button,
        > [class$='-wrapper']:not(:first-child) > * > .button,
        > .button-group:not(:first-child) [class$='-wrapper'] > * > .button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    &.-vertical {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        .button,
        .button-group,
        [class$='-wrapper'] {
            width: 100%;
        }

        > .button:last-child,
        > [class$='-wrapper']:last-child > * > .button:last-child {
            border-bottom-left-radius: var(
                --button-group--border-bottom-left-radius,
                var(--button--border-bottom-left-radius)
            );
            border-bottom-right-radius: var(
                --button-group--border-bottom-right-radius,
                var(--button--border-bottom-right-radius)
            );
        }

        > .button:first-child,
        > [class$='-wrapper']:first-child > * > .button:first-child {
            border-top-left-radius: var(
                --button-group--border-top-left-radius,
                var(--button--border-top-left-radius)
            );
            border-top-right-radius: var(
                --button-group--border-top-right-radius,
                var(--button--border-top-right-radius)
            );
        }

        > .button:not(:last-child),
        > .button-group:not(:last-child) .button,
        > [class$='-wrapper']:not(:last-child) > * > .button,
        > .button-group:not(:last-child) [class$='-wrapper'] > * > .button {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 0;
        }

        > .button:not(:first-child),
        > .button-group:not(:first-child) .button,
        > [class$='-wrapper']:not(:first-child) > * > .button,
        > .button-group:not(:first-child) [class$='-wrapper'] > * > .button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}