.icon {
  color: var(--color-gray-500);

  &:hover {
    color: var(--color-brand-light);
  }

  @include e(bordered) {
    @extend .icon;

    &:after {
      @extend %pseudos;

      border: 1px solid var(--color-gray-400);
      border-radius: $border-radius-base;
      width: calc(100% + 0.8rem);
      height: calc(100% + 0.8rem);
      top: -0.4rem;
      left: -0.4rem;
    }
  }
}

.eyes-icon-label {
  border-color: var(--color-gray-400);
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 0.125rem;
  transform: translateY(-1.25rem);
}