@import '../../styles/variables';

/**************************************
 * Button Group
 **************************************/

.bdl-ButtonGroup {
    position: relative;

    .toggle-overlay {
        display: inline;

        > .btn,
        > .bdl-targeted-click-through > .btn {
            margin-left: 0;
            padding-right: 11px;
            padding-left: 11px;
            border-radius: 0 $bdl-border-radius-size-med $bdl-border-radius-size-med 0;

            &.btn-primary {
                border-left-color: darken($primary-color, 10%);
            }
        }

        .icon-caret-down {
            &::after {
                content: '';
            }

            path {
                fill: $white;
            }
        }

        .overlay-wrapper {
            position: static;

            .overlay {
                left: 0;
            }
        }
    }

    &,
    & > .bdl-targeted-click-through {
        > .btn,
        > .bdl-Tooltip-target > .btn {
            margin: 5px 0 5px -1px;
            border-radius: 0;

            &.btn-primary {
                margin: 5px 0;
                border-right-color: darken($primary-color, 10%);

                &.is-selected {
                    color: $white;
                    background-color: darken($primary-color, 8%);
                    border-color: darken($primary-color, 15%);
                    box-shadow: none;
                }

                &:last-of-type {
                    border-right-color: $primary-color;
                }
            }
        }

        > .btn:first-child,
        > .bdl-Tooltip-target:first-child > .btn {
            border-top-left-radius: $bdl-border-radius-size-med;
            border-bottom-left-radius: $bdl-border-radius-size-med;
        }

        > .btn:last-child,
        > .bdl-Tooltip-target:last-child > .btn {
            border-top-right-radius: $bdl-border-radius-size-med;
            border-bottom-right-radius: $bdl-border-radius-size-med;
        }

        > .btn.is-selected,
        > .bdl-Tooltip-target > .btn.is-selected {
            z-index: 2; /* place on top of siblings */
            color: $bdl-gray-80;
            background-color: $bdl-gray-10;
            border-color: $bdl-gray-65;
            box-shadow: none;
        }

        > .btn:focus,
        > .bdl-Tooltip-target > .btn:focus {
            z-index: 3; /* place on top of all other buttons for accessibility */
        }
    }

    &.bdl-is-disabled,
    &.is-disabled {
        &,
        & > .bdl-targeted-click-through {
            > .btn,
            > .bdl-Button {
                color: $bdl-gray-65;
                background-color: $bdl-gray-02;
                border: 1px solid $bdl-gray-30;
                box-shadow: none;
                cursor: default;
                opacity: 0.4;
            }

            > .btn-primary {
                color: $white;
                background-color: $primary-color;
                border-color: $primary-color;
                border-right-color: darken($primary-color, 10%);

                &:last-of-type {
                    border-right-color: $primary-color;
                }
            }
        }
    }
}

/*
* Section below is for bdl-namespace backwards compatibility.
* Do not add changes below this line.
*/
.btn-group {
    @extend .bdl-ButtonGroup;
}