.svg-icon {
  display: block;
  fill: currentColor;

  svg {
    display: block;
    transition: none;

    path {
      transition: none;
    }
  }

  &.color {
    svg path, svg polygon {
      fill: currentColor;
    }
  }

  &.color-stroke {
    svg path {
      stroke: currentColor;
    }
  }
}

.icon-10 {
  width: 10px;
  height: 10px;
}

.icon-12 {
  width: 12px;
  height: 12px;
}

.icon-16 {
  width: 16px;
  height: 16px;
}

.icon-24 {
  width: 24px;
  height: 24px;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

.icon-48 {
  width: 48px;
  height: 48px;
}

.inline {
  display: inline-block;
}

.toggle-up, .toggle-down {
  cursor: pointer;

  .svg-icon {
    width: 20px;
  }
}

.close-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;

  & svg path {
    stroke: $gray-200;
  }

  &:hover svg path {
    stroke: $gray-100;
  }
}
