@use "variables" as *;

.dot-secondary-toolbar__main,
.dot-secondary-toolbar__lower:empty {
    display: none;
}

.dot-secondary-toolbar__main {
    background-color: $white;
    border-bottom: solid 1px $color-palette-gray-300;
    display: flex;
    padding: 0 $spacing-4 0 $spacing-4;
    height: $dot-secondary-toolbar-main-height;
}

.dot-secondary-toolbar__lower {
    display: flex;
    padding: 0 87px 0 $spacing-4;
    flex-wrap: wrap;
    background-color: $white;
    border-bottom: solid 1px $color-palette-gray-300;
}

::ng-deep {
    .main-toolbar-left,
    .lower-toolbar-left {
        display: flex;
        flex-grow: 1;
    }

    .main-toolbar-right,
    .lower-toolbar-right {
        align-items: center;
        display: flex;
    }

    .lower-toolbar-left,
    .lower-toolbar-right {
        height: $dot-secondary-toolbar-height;
    }

    @media only screen and (max-width: $screen-device-container-max) {
        .lower-toolbar-right {
            flex-flow: row-reverse;
        }
    }

    .toolbar__sep {
        border-left: solid 1px $color-palette-gray-200;
        margin: 0 $spacing-3 0 $spacing-2;
        display: block;
        height: 40px;
    }

    .dot-secondary-toolbar__main.edit-page-variant-mode {
        background-color: $color-palette-primary;
        color: $white;
        .main-toolbar-left {
            color: $white;
            i,
            dot-copy-button button,
            button .pi {
                color: $white;
            }

            h2 {
                color: inherit;
                font-size: $font-size-xl;
                font-weight: normal;
            }

            dot-copy-button button {
                i.pi {
                    color: $white;
                }
                &:hover {
                    background-color: $color-palette-white-op-10;
                }
            }
            button:hover {
                background-color: $color-palette-white-op-10;
            }
        }

        .main-toolbar-right {
            h2 {
                margin: 0;
                font-size: $font-size-lmd;
            }
        }
    }
}
