/*!markdown

---
title: Overflow
---

内容超出相关样式。

| Class       | Properties               |
| ----------- | ------------------------ |
| overflow-auto  | overflow: auto;  |
| overflow-hidden  | overflow: hidden;  |
| overflow-visible  | overflow: visible;  |
| overflow-scroll  | overflow: scroll;  |
| overflow-x-auto  | overflow-x: auto;  |
| overflow-y-auto  | overflow-y: auto;  |
| overflow-x-hidden  | overflow-x: hidden;  |
| overflow-y-hidden  | overflow-y: hidden;  |
| overflow-x-visible  | overflow-x: visible;  |
| overflow-y-visible  | overflow-y: visible;  |
| overflow-x-scroll  | overflow-x: scroll;  |
| overflow-y-scroll  | overflow-y: scroll;  |

## 用法

请前往一下文档查看属性含义。

https://www.w3school.com.cn/cssref/pr_pos_overflow.asp

# 响应式设计

支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。

## 状态前缀

不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。


*/

@mixin make-overflow($prefix: '.') {
  #{$prefix}overflow-auto {
    overflow: auto;
  }
  #{$prefix}overflow-hidden {
    overflow: hidden;
  }
  #{$prefix}overflow-visible {
    overflow: visible;
  }
  #{$prefix}overflow-scroll {
    overflow: scroll;
  }
  #{$prefix}overflow-x-auto {
    overflow-x: auto;
  }
  #{$prefix}overflow-y-auto {
    overflow-y: auto;
  }
  #{$prefix}overflow-x-hidden {
    overflow-x: hidden;
  }
  #{$prefix}overflow-y-hidden {
    overflow-y: hidden;
  }
  #{$prefix}overflow-x-visible {
    overflow-x: visible;
  }
  #{$prefix}overflow-y-visible {
    overflow-y: visible;
  }
  #{$prefix}overflow-x-scroll {
    overflow-x: scroll;
  }
  #{$prefix}overflow-y-scroll {
    overflow-y: scroll;
  }
}

@include make-overflow();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-overflow('.' + selector-escape($deivce + ':'));
  }
}