daga-diagram-buttons {
  .daga-diagram-buttons {
    margin: 1rem;
    display: flex;
    gap: 1rem;
    .daga-collapsable-buttons {
      display: flex;
      gap: 1rem;
    }
    button {
      position: relative;
      display: block;
      min-height: 3rem;
      height: 3rem;
      min-width: 3rem;
      width: 3rem;
      padding: 0;
      border: 0;
      background-color: transparent;
      .daga-tooltip {
        visibility: hidden;
        z-index: 1;
        position: absolute;
        height: 2rem;
        padding: 0.6rem;
        border-radius: 0.25rem;
        font-size: 0.8rem;
        font-weight: 500;
        box-sizing: border-box;
        white-space: nowrap;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.6);
      }
    }
    button:hover .daga-tooltip {
      visibility: visible;
    }
    button.daga-filter.daga-on {
      background-image: url(../icon/buttons/filter-on.svg);
    }
    button.daga-filter.daga-on:hover {
      background-image: url(../icon/buttons/filter-on-hover.svg);
    }
    button.daga-filter.daga-off {
      background-image: url(../icon/buttons/filter-off.svg);
    }
    button.daga-filter.daga-off:hover {
      background-image: url(../icon/buttons/filter-off-hover.svg);
    }
    button.daga-layout {
      background-image: url(../icon/buttons/layout.svg);
    }
    button.daga-layout:hover {
      background-image: url(../icon/buttons/layout-hover.svg);
    }
    button.daga-zoom-in {
      background-image: url(../icon/buttons/zoom-in.svg);
    }
    button.daga-zoom-in:hover {
      background-image: url(../icon/buttons/zoom-in-hover.svg);
    }
    button.daga-zoom-out {
      background-image: url(../icon/buttons/zoom-out.svg);
    }
    button.daga-zoom-out:hover {
      background-image: url(../icon/buttons/zoom-out-hover.svg);
    }
    button.daga-center {
      background-image: url(../icon/buttons/center.svg);
    }
    button.daga-center:hover {
      background-image: url(../icon/buttons/center-hover.svg);
    }
    button.daga-undo {
      background-image: url(../icon/buttons/undo.svg);
    }
    button.daga-undo:hover {
      background-image: url(../icon/buttons/undo-hover.svg);
    }
    button.daga-redo {
      background-image: url(../icon/buttons/redo.svg);
    }
    button.daga-redo:hover {
      background-image: url(../icon/buttons/redo-hover.svg);
    }
    button.daga-copy {
      background-image: url(../icon/buttons/copy.svg);
    }
    button.daga-copy:hover {
      background-image: url(../icon/buttons/copy-hover.svg);
    }
    button.daga-cut {
      background-image: url(../icon/buttons/cut.svg);
    }
    button.daga-cut:hover {
      background-image: url(../icon/buttons/cut-hover.svg);
    }
    button.daga-multiple-selection.daga-off {
      background-image: url(../icon/buttons/multiple-selection.svg);
    }
    button.daga-multiple-selection.daga-on,
    button.daga-multiple-selection:hover {
      background-image: url(../icon/buttons/multiple-selection-hover.svg);
    }
    button.daga-paste {
      background-image: url(../icon/buttons/paste.svg);
    }
    button.daga-paste:hover {
      background-image: url(../icon/buttons/paste-hover.svg);
    }
    button.daga-delete {
      background-image: url(../icon/buttons/delete.svg);
    }
    button.daga-delete:hover {
      background-image: url(../icon/buttons/delete-hover.svg);
    }
    button.daga-more-options {
      background-image: url(../icon/buttons/ellipsis.svg);
    }
    button.daga-more-options:hover {
      background-image: url(../icon/buttons/ellipsis-hover.svg);
    }
  }
  .daga-diagram-buttons.daga-bottom-right.daga-bottom,
  .daga-diagram-buttons.daga-bottom-right.daga-top,
  .daga-diagram-buttons.daga-top-right.daga-bottom,
  .daga-diagram-buttons.daga-top-right.daga-top {
    .daga-tooltip {
      top: 0.5rem;
      right: 3.5rem;
    }
  }
  .daga-diagram-buttons.daga-bottom-left.daga-bottom,
  .daga-diagram-buttons.daga-bottom-left.daga-top,
  .daga-diagram-buttons.daga-top-left.daga-bottom,
  .daga-diagram-buttons.daga-top-left.daga-top {
    .daga-tooltip {
      top: 0.5rem;
      left: 3.5rem;
    }
  }
  .daga-diagram-buttons.daga-bottom-left.daga-left,
  .daga-diagram-buttons.daga-bottom-left.daga-right {
    .daga-tooltip {
      bottom: 3.5rem;
      left: 0rem;
    }
  }
  .daga-diagram-buttons.daga-bottom-right.daga-left,
  .daga-diagram-buttons.daga-bottom-right.daga-right {
    .daga-tooltip {
      bottom: 3.5rem;
      right: 0rem;
    }
  }
  .daga-diagram-buttons.daga-top-left.daga-left,
  .daga-diagram-buttons.daga-top-left.daga-right {
    .daga-tooltip {
      top: 3.5rem;
      left: 0rem;
    }
  }
  .daga-diagram-buttons.daga-top-right.daga-left,
  .daga-diagram-buttons.daga-top-right.daga-right {
    .daga-tooltip {
      top: 3.5rem;
      right: 0rem;
    }
  }
  .daga-diagram-buttons.daga-bottom {
    .daga-collapsable-buttons {
      flex-direction: column;
    }
    flex-direction: column;
  }
  .daga-diagram-buttons.daga-top {
    .daga-collapsable-buttons {
      flex-direction: column-reverse;
    }
    flex-direction: column-reverse;
  }
  .daga-diagram-buttons.daga-right {
    .daga-collapsable-buttons {
      flex-direction: row;
    }
    flex-direction: row;
  }
  .daga-diagram-buttons.daga-left {
    .daga-collapsable-buttons {
      flex-direction: row-reverse;
    }
    flex-direction: row-reverse;
  }
}