@import 'base-var';
@import 'var';

@function theme-selector($theme, $scope) {
  @if ($scope) {
    @return selector-nest($theme, $scope);
  } @else {
    @return $theme;
  }
}

@mixin theme-light {
  $scope: &;

  @at-root {
    #{theme-selector(':root', $scope)} {
      @content;
    }

    #{theme-selector('html[aui-theme-mode=light]', $scope)} {
      @content;
    }
  }
}

@mixin theme-dark {
  $scope: &;

  @at-root {
    #{theme-selector('html[aui-theme-mode=system]', $scope)} {
      @media (prefers-color-scheme: dark) {
        @content;
      }
    }

    #{theme-selector('html[aui-theme-mode=dark]', $scope)} {
      @content;
    }
  }
}

@mixin text-set($size: m, $color: none, $weight: normal) {
  font-size: use-var(font-size-#{$size});
  line-height: use-var(line-height-#{$size});
  font-weight: use-var(font-weight-#{$weight});
  @if $color != none {
    color: use-text-color($color);
  }
}

@mixin icon-set($size: m, $color: none) {
  display: inline-flex;
  align-items: center;
  height: use-var(line-height-#{$size});
  font-size: use-var(font-size-#{$size});
  @if $color != none {
    color: use-text-color($color);
  }
}

// 使用 box-shadow 模拟带圆角的 outline
@mixin outline-shadow($color: primary, $theme: auto) {
  @if ($theme == light) {
    box-shadow: 0 0 0 2px use-rgba($color, 0.16);
  } @else if($theme == dark) {
    box-shadow: 0 0 0 2px use-rgba($color, 0.3);
  } @else {
    @include theme-light {
      box-shadow: 0 0 0 2px use-rgba($color, 0.16);
    }
    @include theme-dark {
      box-shadow: 0 0 0 2px use-rgba($color, 0.3);
    }
  }
}

@mixin card-shadow($theme: auto) {
  @if ($theme == light) {
    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
  } @else if($theme == dark) {
    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
  } @else {
    @include theme-light {
      box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
    }
    @include theme-dark {
      box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
    }
  }
}

@mixin popper-shadow($theme: auto) {
  @if ($theme == light) {
    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
  } @else if($theme == dark) {
    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
  } @else {
    @include theme-light {
      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
    }
    @include theme-dark {
      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
    }
  }
}

@mixin modal-shadow($theme: auto) {
  @if ($theme == light) {
    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
  } @else if($theme == dark) {
    box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
  } @else {
    @include theme-light {
      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
    }
    @include theme-dark {
      box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
    }
  }
}

@mixin modal-backdrop($theme: auto) {
  @if ($theme == light) {
    background-color: use-rgba(origin-shadow, 0.4);
  } @else if($theme == dark) {
    background-color: use-rgba(origin-shadow, 0.75);
  } @else {
    @include theme-light {
      background-color: use-rgba(origin-shadow, 0.4);
    }
    @include theme-dark {
      background-color: use-rgba(origin-shadow, 0.75);
    }
  }
}

@mixin overlay-pane($alignItems: center) {
  overflow: auto;
  @include flex-center($alignItems);
  @include scroll-bar;
}

@mixin transition($target: all) {
  transition: $target $animation-duration-slow $animation-interpolation;
}

@mixin absolute-center() {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin scroll-bar($color: #{use-rgb(n-7)}, $hover-color: #{use-rgb(n-5)}) {
  &::-webkit-scrollbar {
    width: 8px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: $color;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: $hover-color;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

@mixin clear-button() {
  border-radius: 50%;
  color: use-text-color(help);
  cursor: pointer;
  @include transition;

  &:hover {
    color: use-rgb(main-bg);
    background-color: use-text-color(help);
  }
}

@mixin input-field-indicator() {
  &__icon-container {
    display: block;
    position: relative;
    pointer-events: none !important;

    .aui-icon {
      margin: 0 !important;
    }
  }

  &.isDisabled &__icon-container {
    color: use-rgb(n-4);
  }

  &__indicator {
    display: flex;
  }

  &__clear {
    display: none;

    .aui-icon {
      @include clear-button;
    }
  }

  &.isClearable:not(.isDisabled):hover & {
    &__indicator {
      display: none;
    }

    &__clear {
      display: flex;
      pointer-events: auto;
    }
  }
}

@mixin input-error() {
  border-color: use-rgb(red) !important;

  &:focus,
  &.isFocused {
    @include outline-shadow(red);
  }
}

@mixin expand-button() {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: use-var(icon-size-m);
  height: use-var(icon-size-m);
  color: use-rgb(primary);
  background-color: use-rgb(p-6);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;

  aui-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: use-var(icon-size-s);
    height: use-var(icon-size-s);
    font-size: use-var(icon-size-s);
  }

  &:hover {
    background-color: use-rgb(p-7);
  }

  &:active {
    background-color: use-rgb(p-5);
  }

  &.isExpanded {
    transform: rotate(90deg);
    color: white;
    background-color: use-rgb(primary);

    &:hover {
      background-color: use-rgb(p-1);
    }

    &:active {
      background-color: use-rgb(p-0);
    }
  }

  &[disabled],
  &.isExpanded[disabled] {
    background-color: use-rgb(n-8);
    color: use-rgb(n-6);
    cursor: not-allowed;
  }
}

@mixin text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin flex-center($alignItems: center) {
  display: flex;
  justify-content: center;
  align-items: $alignItems;
}

@mixin point($size, $color: #000) {
  width: $size;
  height: $size;
  border-radius: 50%;
  background-color: $color;
}

@mixin view-readonly {
  background-color: use-rgb(main-bg);
  border-color: use-rgb(border);
}

@mixin vertical-dashed-line($width: 1px, $color: 'n-7') {
  background: linear-gradient(
    to bottom,
    use-rgb($color),
    use-rgb($color) 8px,
    transparent 6px,
    transparent
  );
  width: $width;
  background-size: 100% 14px;
  height: 100%;
}

// Motion
@mixin motion-common($duration: $animation-duration-base) {
  animation-duration: $duration;
  animation-fill-mode: both;
  animation-play-state: paused;
}

@mixin make-motion(
  $className,
  $keyframeName,
  $duration: $animation-duration-base
) {
  .#{$className}-enter,
  .#{$className}-leave {
    @include motion-common($duration);
  }

  .#{$className}-enter.#{$className}-enter-active,
  .#{$className}-leave.#{$className}-leave-active {
    animation-play-state: running;
    pointer-events: none;
  }

  .#{$className}-enter.#{$className}-enter-active {
    animation-name: #{$keyframeName}-in;
  }

  .#{$className}-leave.#{$className}-leave-active {
    animation-name: #{$keyframeName}-out;
  }
}