.ff-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  box-sizing: content-box;

  &.ff-icon-danger {
    &:hover {
      background-color: var(--ff-icon-color-danger-variant);
    }
  }
  &.ff-icon-dark {
    background-color: var(--brand-color);
    border-radius: 4px;
    &.ff-icon-selected {
      background-color: var(--ff-icon-selected-color);
      svg path {
        fill: var(--brand-color);
      }
    }
    &.ff-icon-click {
      &:hover {
        background-color: var(--ff-icon-hover-color-dark-variant);
        svg path {
          fill: var(--brand-color);
        }
      }
    }
  }
}

.ff-icon-click {
  cursor: pointer;
  box-sizing: content-box;
  &:hover {
    border-radius: 4px;
    background-color: var(--ff-icon-hover-fill-color);
    & > svg {
      color: var(--brand-color);
    }
  }
}

.ff-icon-disabled {
  cursor: no-drop;
  opacity: 0.5;
  & > svg {
    color: var(--toggle-strip-color);
  }
  &:hover {
    box-shadow: none;
    & > svg {
      color: var(--toggle-strip-color);
    }
  }
}