/* Keep the teleported cascader popup inside a phone viewport. Desktop rules are unchanged. */
@media (max-width: 767px) {
  .el-cascader__dropdown.el-popper {
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
  }

  .el-cascader__dropdown .el-cascader-panel {
    box-sizing: border-box;
    width: calc(100vw - 18px);
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .el-cascader__dropdown .el-cascader-menu {
    flex: 1 0 calc((100vw - 24px) / 3);
    width: calc((100vw - 24px) / 3);
    min-width: 0;
  }

  .el-cascader__dropdown .el-cascader-menu__wrap.el-scrollbar__wrap {
    max-height: 42vh;
  }

  .el-cascader__dropdown .el-cascader-menu .el-cascader-node {
    height: auto;
    min-height: 40px;
    padding: 6px 19px 6px 16px;
    line-height: 1.4;
  }

  .el-cascader__dropdown .el-cascader-menu:last-child .el-cascader-node {
    padding-right: 8px;
  }

  .el-cascader__dropdown .el-cascader-node__label {
    min-width: 0;
    padding: 0 4px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .el-cascader__dropdown .el-cascader-node__prefix {
    left: 2px;
  }

  .el-cascader__dropdown .el-cascader-node__postfix {
    right: 5px;
  }
}