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

@include b(icon-plus) {
  @include set-component-css-var('icon', $icon);

  @include flex('center', 'center');
  width: getCssVar('icon', 'height');
  height: getCssVar('icon', 'height');
  position: relative;
  transition: getCssVar('transition');
  cursor: pointer;

  &:before,
  &::after {
    background: getCssVar('color');
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 2px;
  }
  @include pseudo(before) {
    transform: rotate(0);
    transition: getCssVar('transition');
  }
  @include pseudo(after) {
    transform: rotate(90deg);
    transition: all 0.4s ease;
  }

  &:hover:not(.is-less) {
    transform: rotate(-90deg);
  }

  @include when(less) {
    @include pseudo(hover) {
      transform: scale(0.75);
    }
    @include pseudo(after) {
      transform: rotate(180deg);
    }
  }
}