.toolbar-dropdown {
  // Make sure the contents shrink beyond their intrinsic width
  // See https://css-tricks.com/flexbox-truncated-text/
  min-width: 0;

  & > .toolbar-button {
    width: 100%;
    height: 100%;
  }

  &.open {
    & > .toolbar-button > button {
      color: var(--toolbar-button-active-color);
      background-color: var(--toolbar-button-active-background-color);

      // The foldout doesn't have a border so we have to either
      // color ours or remove it entirely for us to match the
      // min-width of the foldout.
      border-color: var(--toolbar-button-active-border-color);

      .description {
        color: var(--text-secondary-color);
      }

      .progress {
        background-color: var(--toolbar-dropdown-open-progress-color);
      }
    }
  }
}
