.icon-button--close {
  background: none;
  border: 0 none;
  border-radius: 0;
  cursor: pointer;
  height: 1.375rem;
  position: relative;
  width: 1.375rem;

  &:--enter {
    &::before {
      border-color: var(--iconcolor--hover);
    }
    &::after {
      background: none;
      border-color: var(--iconcolor--hover);
    }
  }

  &::before {
    border-top: .125rem solid var(--iconcolor);
    content: '';
    left: .25rem;
    position: absolute;
    top: .375rem;
    transform: rotate(45deg);
    width: 1.125rem;

    @media (--fluid) {
      left: .0625rem;
      width: 1.5rem;
    }
    @nest .modal & {
      left: .0625rem;
      width: 1.5rem;
    }
  }
  &::after {
    background: none;
    border-top: .125rem solid var(--iconcolor);
    content: '';
    left: .25rem;
    position: absolute;
    top: .375rem;
    transform: rotate(-45deg);
    width: 1.125rem;

    @media (--fluid) {
      left: .0625rem;
      width: 1.5rem;
    }
    @nest .modal & {
      left: .0625rem;
      width: 1.5rem;
    }
  }

  &.icon-button--search {
    fill: transparent;

    &::before, &::after {
      left: -.1875rem;
      top: .5625rem;
    }
  }
}