@import '../../assets/styles/colors';

.group-icons {
  display: flex;
  flex-wrap: wrap;
  > div {
    display: flex;
    width: 90px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px dashed grey;
    background-color: rgb(222, 226, 230);
    margin-right: 4px;
    margin-bottom: 16px;
    padding: 20px;

    > p {
      width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
  }
}

.ff-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ff-icon-click {
  cursor: pointer;
  padding: 5px;
  box-sizing: content-box;
  &:hover {
    border-radius: 50%;
    background-color: $white;
    box-shadow: 0px 0px 16px $shadow;
    & > svg {
      color: $primary !important;
    }
  }
}

.ff-icon-hover-fill {
  cursor: pointer;
  &:hover {
    svg {
      color: $primary !important;
    }
  }
}

.ff-icon-disabled {
  cursor: no-drop;
  & > svg {
    color: $grey_4 !important;
  }
  &:hover {
    box-shadow: none;
    & > svg {
      color: $grey_4 !important;
    }
  }
}