@import '../../../css/colors.css';

.wrapper {
  position: relative;
  top: 0.05rem;
  float: right;
  margin-left: 3px;

  :global(.icon) {
    cursor: pointer;
    font-size: 1.4rem;
    margin-right: 0.4rem;

    &:global(.edit.icon) {
      margin-right: 0.35rem;
    }

    &:global(.remove.icon) {
      margin-right: 0.2rem;

      /* Semantic UI uses psuedoelements for icons, and the placement
      / of this remove icon, visually, is on the far right of the actual
      / DOM real-estate that the element takes up by default, causing clicks/touches
      / that seemingly fall 'left' of the icon to end up causing the click
      / event handler to fire. here, we limit the width to keep the button
      / from causing less unwanted idea deletions
      */
      width: fit-content;
    }

    @media (min-width: 768px) {
      font-size: 1.25rem;
      margin-right: 0.25rem;

      &:global(.edit) {
        margin-right: 0;
      }
    }
  }

  &:global(.disabled .icon) {
    color: var(--semantic-light-grey);
    pointer-events: none;
  }
}


@import '../../../css/colors.css';

.wrapper {
  position: relative;
  top: 0.05rem;
  float: right;
  margin-left: 3px;

  :global(.icon) {
    cursor: pointer;
    font-size: 1.4rem;
    margin-right: 0.4rem;

    &:global(.edit.icon) {
      margin-right: 0.35rem;
    }

    &:global(.remove.icon) {
      margin-right: 0.2rem;

      /* Semantic UI uses psuedoelements for icons, and the placement
      / of this remove icon, visually, is on the far right of the actual
      / DOM real-estate that the element takes up by default, causing clicks/touches
      / that seemingly fall 'left' of the icon to end up causing the click
      / event handler to fire. here, we limit the width to keep the button
      / from causing unwanted idea deletions
      */
      width: fit-content;
    }

    @media (min-width: 768px) {
      font-size: 1.25rem;
      margin-right: 0.25rem;

      &:global(.edit) {
        margin-right: 0;
      }
    }
  }

  &:global(.disabled .icon) {
    color: var(--semantic-light-grey);
    pointer-events: none;
  }
}


Remove typo from explanatory comment
Remove typo from explanatory comment
