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

  display: flex;
  flex-direction: row;

  &.resizable {
    // Fill the available height of the parent
    flex-grow: 1;
  }

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

  & .toolbar-dropdown-arrow-button {
    width: 39px;
  }

  &.open {
    &.foldout-style > .toolbar-button > button,
    &.multi-option-style > .toolbar-dropdown-arrow-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);
      }
    }
  }
}
