@import 'abstracts/variables';
@import 'abstracts/mixins';

.group-buttons-container {
    display: flex; // inline-flex;
    border-radius: $border-radius-md;

    .dropdown-buttons,
    .split-buttons {
        // margin-top: $spacing-xs;

        .first-button {
            margin-right: 1px;
        }

        .first-button,
        .first-button:after {
            border-radius: $border-radius-md 0 0 $border-radius-md;
        }

        .last-button,
        .last-button:after {
            border-radius: 0 $border-radius-md $border-radius-md 0;
        }

        .pepperi-button {
            margin-top: 0 !important; // override material defaults.

            &.cdk-focused {
                z-index: $z-index-lowest;
            }
        }

        @media (max-width: $screen-max-size-xs) {
            &.dropup {
                .first-button {
                    @include calc(max-width, '75vw - 4rem'); //we have a variants for it !!!
                    padding: 0 0.25rem;
                }

                .last-button {
                    padding: 0;
                }
            }
        }
    }

    .split-buttons {
        .first-button {
            margin-right: -1px;
        }

        .middle-button {
            border-radius: 0;
        }

        mat-icon {
            .svg-icon {
                height: inherit;
                width: inherit;
            }
        }
    }

    &[dir='rtl'] {
        .split-buttons,
        .dropdown-buttons {
            .first-button {
                margin-right: unset;
                margin-left: 1px;
            }

            .first-button,
            .first-button:after {
                border-radius: 0 $border-radius-md $border-radius-md 0;
            }

            .last-button,
            .last-button:after {
                border-radius: $border-radius-md 0 0 $border-radius-md;
            }
        }

        .split-buttons {
            .first-button {
                margin-left: -1px;
            }
        }
    }
}