.icon-light svg {
  fill: white;
}

[role="menubar"] {
  .icon {
    width: 2rem;
    height: 2rem;
    fill: var(--color-ui-4);
  }
}

icon > .icon {
  @include no-mouse();
}

icon.scaled > .icon {
  transform: scale(1.5);
}

.drag-handle {
  width: $deouble-padding;
  height: $deouble-padding;

  .icon {
    width: $deouble-padding;
    height: $deouble-padding;
    transform: scale(0.5);
  }
}

.assist-toolbar, .assist-search {
  .icon {
    width: $toolbar-icon-size;
    height: $toolbar-icon-size;
    fill: var(--color-ui-4);
    opacity: 0.6;
  }
}

.app-toolbar {
  button {
    margin-top: 0.4rem;
  }

  .icon {
    width: $common-icon-size;
    height: $common-icon-size;
    fill: var(--color-brand-dark);
    opacity: 0.6;
  }
}

.toolbar {
  .icon {
    width: $toolbar-icon-size;
    height: $toolbar-icon-size;
  }
}

.menu-search {
  .icon {
    padding-top: 0.3rem;
    width: $common-icon-size;
    height: $common-icon-size;
    fill: var(--color-ui-4);
    opacity: 0.6;
  }
}

form-search {
  input {
    border-width: 0;
  }

  .icon {
    width: $common-icon-size;
    height: $common-icon-size;
    fill: var(--color-brand-dark);
    opacity: 0.6;
  }
}

.icon-collection {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0;
  @include flex();
  @include flex-wrap();
}

.icon-preview {
  @include flex();
  @include flex-column();
  width: 6.25rem;
  align-items: center;

  div {
    text-align: center;
    opacity: 0.6;
  }

  icon, .icon {
    width: $large-icon-size;
    height: $large-icon-size;
  }
}

pragma-dropdown-menu, .toolbar-no-padding {
  icon {
    width: $default-padding + $half-padding;
    height: $default-padding + $half-padding;
  }

  .icon {
    width: $default-padding;
    height: $default-padding;
    margin-top: 0.2rem;
  }
}

.icon-button {
  icon, .icon {
    width: $default-padding;
    height: $default-padding;
  }
}