src/components/ModularComponents/OfficeEditor/ListToggleButton/ListToggleButton.scss
@import '../../../../constants/styles';

.Flyout .FlyoutContainer .flyout-item-container.flyout-item-container--list-type {
  display: inline-block;
  width: calc(33.33% - 4px);
  margin: 8px 2px;
  height: auto;

  .flyout-item {
    padding: 0;
    margin: 0 auto;
    width: auto;
    height: auto;
    text-align: center;

    &.active,
    &:hover {
      background: var(--tools-button-hover);

      .office-editor-list-style-item-border {
        // svg rect border styling
        stroke: var(--dropdown-item-active);
      }
    }
  }

  &:hover {
    background-color: transparent;

    &:not(.disabled) {
      .Icon,
      svg * {
        fill: var(--gray-7); // overwriting default white flyout icon hover style
      }
    }
  }

  .flyout-item-label {
    display: none;
  }

  .Icon,
  .Icon svg {
    margin-inline-end: 0;
    width: 59px;
    height: 73px;
  }

  .Icon,
  .Icon svg * {
    color: var(--icon-color) !important; // prevent default dropdown style to fill in svg shapes with color
  }
}

.office-editor-number-list-wrapper.modular-ui {
  display: flex;
  flex-direction: row;

  .Dropdown {
    background: transparent;
    border: none;
    padding: 0px;
    width: 24px;

    &:hover {
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px var(--blue-6);
    }

    svg {
      rect {
        stroke: none;
      }
    }
  }

  .picked-option {
    justify-content: center;
  }

  .picked-option-text {
    display: none;
  }

  .arrow {
    margin-top: 0px;
    width: 16px;
  }

  .Dropdown__items {
    overflow: hidden;
    width: auto;

    $button-height: 74px;
    $button-width: 60px;

    .Dropdown__item {
      height: $button-height;
      padding: 15px 0px;
      margin: 3px;
      cursor: pointer;

      .Icon,
      .Icon svg * {
        color: transparent; // prevent default dropdown style to fill in svg shapes with color
      }

      &.active,
      &:hover {
        background: var(--tools-button-hover);

        .office-editor-list-style-item-border {
          // svg rect border styling
          stroke: var(--dropdown-item-active);
        }
      }

      .officeEditor-list-style-icon {
        width: $button-width;
        height: $button-height;
      }
    }
  }
}
