@import "src/variables.scss";

:host {
    .vert-toolbar {
        display: flex;
        align-items: center;
        position: absolute;
        top: 8px;
        right: 8px;
        flex-direction: column;

        .toolbar-buttons {
            display: flex;
            align-items: center;
            border-radius: 2px;
            overflow: hidden;
            flex-direction: column;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                min-height: 52px;
                min-width: 52px;

                > * {
                    font-size: 20px;
                    color: $font-color-primary;
                    fill: $font-color-primary;
                }
            }

            button:not(:last-of-type) {
                border-bottom: 1px solid $border-color;
            }

            button[disabled],
            button.disabled {
                background: $disabled-background-color;

                > * {
                    color: $disabled-color;
                    fill: $disabled-color;
                }
            }

            button.active {
                background: $primary-color;

                > * {
                    color: #fff;
                    fill: #fff;
                }
            }
        }

        .toolbar-buttons:not(:last-of-type) {
            margin-bottom: 8px;
        }
    }
}
