@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(icon) {
  @include b(close) {
    @include set-component-css-var('icon', $icon);
    width: getCssVar('icon', 'height');
    height: getCssVar('icon', 'height');
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s ease;

    &::before,
    &::after {
      background: getCssVar('icon', 'background');
      content: '';
      position: absolute;
      width: 16px;
      height: 2px;
      border-radius: 2px;
      transition: getCssVar('transition');
    }

    @include pseudo(before) {
      transform: rotate(-45deg);
    }
    @include pseudo(after) {
      transform: rotate(45deg);
    }
  }

  @include b(hover) {
    @include m(less) {
      &:hover {
        &:before,
        &:after {
          width: 12px;
          transform: rotate(180deg);
        }
      }
    }
  }
}