src/components/Header/OfficeHeader.scss
@import '../../constants/styles';

.MainHeader.OfficeEditorTools {
  padding: 0 8px;
  align-items: center;
  flex-direction: row;

  .HeaderItems {
    width: auto;

    .Dropdown {
      margin-inline-start: 8px;

      .picked-option {
        text-align: start;
      }
    }

    .action-button-wrapper {
      display: flex;
      align-items: center;
      position: relative;

      .more-tools {
        position: absolute;
        inset-block-start: 46px;
        inset-inline-end: 6px;
        width: auto;
        padding: 0;
      }
    }
  }

  .Button .Icon svg {
    vertical-align: middle;
  }

  .icon-text-color {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list-style-button {
    margin-inline-end: 0px !important;
  }

  .list-style-dropdown {
    background: transparent;
    border: none;
    width: 12px !important;
    height: 32px !important;
    margin-inline-start: 0px !important;
    z-index: 0;

    &.Dropdown__wrapper:hover {
      border-radius: 4px;
      background: var(--tools-button-hover);
    }

    .Dropdown {
      padding: 0px;

      svg {
        rect {
          stroke: none;
        }
      }
    }

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

    .arrow {
      padding-inline-start: 0px;
    }

    .Dropdown__items {
      overflow: hidden;
      width: auto !important;

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

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

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

  .insert-table-dropdown {
    margin: 0 6px;

    &.open {
      background-color: var(--tools-button-hover);
      border-radius: 4px;
    }

    .display-button {
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: var(--tools-button-hover);
        border-radius: 4px;
      }

      .Button {
        background-color: transparent !important;
      }

      .Icon.arrow {
        width: 12px;
        height: 12px;
        margin: 0 2px;
      }
    }
  }
}
