.add-template-group {
  display: flex;
  align-items: center;

  width: fit-content;
  height: 25px;
  margin-right: 6px;
  margin-left: auto;
  padding: 0 10px;

  color: #888;
  text-decoration: none;

  border-radius: 7px;

  &:hover {
    background-color: rgb(0 0 0 / 4%);
  }
}

.add-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  margin-right: 5px;
}

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

  &.hidden {
    display: none;
  }
}

.footer-actions {
  display: flex;
  align-items: center;

  .more-actions {
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 20px;
    margin-right: 20px;
    margin-left: auto;

    line-height: 130%;
    color: var(--color-gray-888);

    border-radius: 3px;

    &::after {
      content: '';
    }
  }
}

$button-color: #fff;
$button-color-hover: rgb(255 255 255 / 80%);

.trigger-menu-button {
  cursor: pointer;

  display: inline-flex;
  align-items: center;

  padding: 0;

  font-size: var(--default-font-size);
  color: $button-color; // var???
  background-color: var(--accent-color-bg);
  border: none;
  border-radius: 4px;
  outline: none;

  :hover {
    opacity: 0.8;
  }

  &-content {
    padding: 2px 17px 2px 21px;
    line-height: 1.8;
    text-align: center;
    border-right: 1px solid var(--header-panel-color-bg);
  }

  &-arrow {
    padding: 0 5px;

    app-cmf-doodle-icon {
      display: flex;
    }
  }
}

.context-menu__item {
  display: flex;
  align-items: center;

  &__icon {
    display: flex;
  }
}

::ng-deep .add-item-icon.scale svg {
  transform: scale(1, -1);
}