src/components/HeaderItems/HeaderItems.scss
@import '../../constants/styles';

.HeaderItems {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 4px;

  // Temporary hack for when two dividers are next to each other. This
  // never looks right so we hide one of them. In office editor, left panel
  // is hidden so we get two dividers side by side. This hack can be removed
  // once left panel is enabled in the future.
  .divider:first-of-type + .divider {
    display: none;
  }

  > .Button,
  > .toggle-element-button {
    margin: 0 6px;

    @include mobile {
      margin: 0 5px;
    }

    @include tablet {
      margin: 0 10px;
    }
  }

  .tool-group-button {
    margin: 0 6px;

    @include tablet-and-mobile {
      margin: 0 11px;
    }
  }

  .spacer {
    flex: 1;
    height: 100%;
  }

  > .divider {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--divider);
    flex-shrink: 0;

    @include tablet-and-mobile {
      margin: 0 4px;
    }
  }
}

.tool-group-buttons-container {
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;

  .chevron-scroll {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 1;
    height: 100%;
    pointer-events: none;
    width: 64px;
    background: var(--tools-header-background);

    @include ie11 {
      background: none; // hack for ie11. Gradient does not work
    }

    inset-block-start: 0px; // hack for ie11. centers vertically.
    inset-block-end: 0px; // hack for ie11. centers vertically.
    margin: auto; // hack for ie11. centers vertically.

    .Icon {
      color: var(--scroll-chevron-color);
    }

    &.left {
      inset-inline-start: 0px;
      mask-image: -webkit-gradient(
        linear,
        right top,
        left top,
        from(rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 1)),
        color-stop(0.6, rgba(0, 0, 0, 1))
      );
      justify-content: flex-start;
    }

    &.right {
      inset-inline-end: 0px;
      mask-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 1)),
        color-stop(0.6, rgba(0, 0, 0, 1))
      );
      justify-content: flex-end;
    }

    .scroll-edge {
      background: var(--tools-header-background);
      height: 100%;

      &.left {
        width: 8px;
      }

      &.right {
        inset-inline-end: 0px;

        @include mobile {
          width: 8px;
        }

        @include tablet {
          width: 16px;
        }

        @include mobile {
          width: 12px;
        }
      }
    }

    .tool-group-button {
      @include button-reset;
      margin: 0px;
      pointer-events: all;
    }
  }
}

.tool-group-buttons-scroll {
  display: flex;
  overflow: auto;
  scroll-behavior: smooth;
  height: 100%;
  align-items: center;
  // fixes https://trello.com/c/NpuvdJh2/1065-ie11-new-ui-squished-header
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
  }

  :last-child {
    margin-inline-end: 0px;
  }
}

.HeaderItems {
  > .divider {
    margin-inline-start: 0px;

    @include desktop {
      margin-inline-start: 16px;
      margin-inline-end: 16px;
    }

    @include tablet {
      margin-inline-start: 16px;
      margin-inline-end: 16px;
    }

    @include mobile {
      margin-inline-start: 16px;
      margin-inline-end: 16px;
    }
  }

  .tool-group-button {
    scroll-snap-align: start;
  }

  > .Button,
  .tool-group-button {
    width: 32px;
    height: 32px;
  }

  .Button {
    &:not(.disabled) {
      &:hover {
        border-radius: 4px;
        background: var(--tools-button-hover);
      }

      &.active {
        border-radius: 4px;
        background: var(--tools-button-active);
      }
    }
  }
}
