@function resource($uri) {
  @return 'url("./' + $uri + '")';
}

@function image($uri) {
  @return resource("images/" + $uri);
}

@mixin diagonalImage($imageUrl, $isMainDiagonal: true, $diagonalSize: 1px) {
  $angle: if($isMainDiagonal, 45deg, 135deg);

  $gradient: linear-gradient(
    $angle,
    transparent calc(50% - #{$diagonalSize}),
    currentColor calc(50% - #{$diagonalSize}),
    currentColor calc(50% + #{$diagonalSize}),
    transparent calc(50% + #{$diagonalSize})
  );

  --menu-image: #{$gradient}, url("#{$imageUrl}");
}

@mixin InvertButtonIcon($id) {
  :root[lwt-toolbar-field="dark"]
    toolbaritem[data-extensionid="#{$id}"][cui-areatype="toolbar"]
    .toolbarbutton-icon,
  :root[lwt-popup="dark"]
    toolbarbutton[data-extensionid="#{$id}"]:not(
      .unified-extensions-item-menu-button
    )
    image {
    filter: invert(1);
  }
}

@mixin InvertMenuIcon($id) {
  :root[lwt-popup="dark"]
    :-moz-any(menu, menuitem)
    > .menu-iconic-left
    > .menu-iconic-icon {
    filter: invert(1);
  }
}
