// ion-content toolbar with segments

ion-content[role="browse"] {

    ion-toolbar {
        --background: inherit;
    }
}

ion-content[role="ad"], ion-footer[role="ad"] {

    ion-toolbar {
        --background: #{$fluster-dark-blue};
    }
}

ion-footer[role="browse"] {

    ion-toolbar {
        --background: #{$fluster-light-grey};
    }
}

ion-content[role="browse"], ion-content[role="ad"] {

    ion-segment {
        ion-segment-button {
            max-width: 100%;
            --border-width: 0;
        }

        ion-segment-button {
            margin-right: 4px;

            &:first-of-type {
                margin-right: 4px;
            }

            &:last-of-type {
                margin-right: 0px;
            }

        }
    }

    ion-toolbar {
        z-index: 1;
    }
}

ion-content[role="browse"] {

    ion-segment {
        ion-segment-button {
            background-color: $fluster-light-grey;
        }
    }
}

ion-content[role="ad"] {

    ion-segment {
        background-color: $fluster-dark-blue;

        ion-segment-button {
            background-color: $fluster-grey-blue;
        }
    }
}

ion-footer[role="browse"], ion-content[role="browse"], ion-footer[role="ad"], ion-content[role="ad"] {

    ion-toolbar {

        ion-segment {

            &[class*="sc-ion-segment"] {

                ion-segment-button {
                    --border-color: transparent;
                    --ion-toolbar-color-unchecked: #{$fluster-midnight-blue};
                    font-size: $fluster-text-normal;
                    --border-radius: 0;
                    opacity: 1.0;
                    --border-width: 0;


                    ion-label {
                        font-size: $fluster-text-small;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        text-transform: none;
                    }

                    &.segment-button-checked {
                        @include fluster-linear-gradient-variable-checked(to bottom right, $fluster-peach1, $fluster-peach3);
                        --border-color-checked: transparent;
                        --ion-toolbar-color-checked: white;
                    }
                }
            }

            &[class*="sc-ion-segment-md"] > .segment-button-checked, &[class*="sc-ion-segment-md"]:not(.ion-color) > .segment-button-checked {
                --indicator-color-checked: #{$fluster-peach3};
                --indicator-color: inherit;
            }

            &.ion-segment-four-buttons {
                ion-segment-button {
                    width: calc(100% / 4);

                    ion-label {
                        max-width: calc(90vw / 4);
                    }
                }
            }
        }
    }
}

ion-footer[role="browse"], ion-footer[role="ad"] {

    ion-toolbar {

        ion-segment {

            &[class*="sc-ion-segment"] {
                ion-label {
                    max-width: 100px;
                    margin-bottom: 8px;
                }

                ion-icon {
                    margin-top: 8px;
                }
            }
        }

    }
}

// ion-footer sticky toolbar

ion-footer[role="browse"], ion-footer[role="ad"] {

    &::before {
        content: "";
        background: none;
    }

    ion-toolbar[role="buttons"] {

        height: 100%;
        --border-color: transparent;

        --padding-start: 0;
        --padding-end: 0;

        ion-button {
            margin-bottom: 16px;
            margin-top: 12px;
        }
    }
}

ion-split-pane ion-footer[role="browse"] {
    ion-toolbar[role="buttons"] {
        --background: rgba(255, 255, 255, 0.9);
    }
}

ion-split-pane ion-footer[role="ad"] {
    ion-toolbar[role="buttons"] {
        --background: rgba(45, 41, 76, 0.7);
    }
}

ion-modal ion-footer[role="browse"] {
    ion-toolbar[role="buttons"] {
        --background: white;
    }
}

ion-modal ion-content div[role="ad"] {
    &.footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 99;
        background: rgba(45, 41, 76, 0.7);

        ion-button {
            margin-top: 12px;
            margin-bottom: 16px;
        }
    }
}
