// @import "../../../fonts/leap-4d-system/src/style"; TODO
// @import "../../../fonts/leap-4d-doctypes/src/style"; TODO 

@mixin icon-init() {
  & {
    position: relative;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
  }

  &:before, &:after {
    position: relative;
    display: block;
    content: '';
  }
}

.x-icon-search {
  @include icon-init();

  &:before {
    width: $search-icon-dimension;
    height: $search-icon-dimension;
    border-radius: $search-icon-dimension;
    border: 1px solid $btn-default-color;
  }

  &:after {
    width: 0.0625rem;
    height: 0.3125rem;
    left: -0.1875rem;
    transform: rotate(45deg) translateY(-0.1875rem);
    background-color: $btn-default-color;
  }
}

.x-icon-close {
  @include icon-init();

  &:before, &:after {
    width: 2px;
    height: 15px;
    background-color: $gray-var-8;
    transform-origin: center;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    top: 0;
    position: absolute !important;
    transform: rotate(-45deg);
  }
}