.fontStylesWrap {
  display: flex;
  align-items: center;

  :global {
    .item {
      display: inline-block;
      min-width: 40px;
      height: 40px;
      line-height: 45px;
      text-align: center;
      background: #fff;
      border-radius: 6px;
      margin-right: 12px;
      cursor: pointer;

      &.active {
        background: #E9F0FF;
      }
    }

    .item-color {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .text-color-line {
        display: block;
        width: 15px;
        height: 3px;
        margin-top: -1px;
        border-radius: 50px;
        background-color: #000;
      }
    }

    .item-text-align {
      padding: 0 9px;
      margin-right: 0;
      cursor: default;

      .item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background-color: transparent;
        margin-right: 5px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          background: #FFFFFF;
          box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
          border-radius: 4px;
        }
      }
    }
  }
}