.l-select-input-box,
.l-select-default {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  .l-select-multiple {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .l-select-input-default {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    input {
      height: 100%;
      width: 100%;
      font-size: 14px;
      outline: none;
      border: 0;
      margin: 0;
      padding: 10px 30px 10px 10px;
      box-sizing: border-box;
      border-radius: 4px;
      color: #606266;
      cursor: pointer;
      border: 1px solid  rgb(217,217,217);
      transition: all 0.2s ease;
      &:focus {
        border-color: #74baff;
        box-shadow:0 0 10px rgba(70, 70, 216, 0.352);
      }
    }
    .l-select-input::placeholder {
      color:  #c6c8cc;
      font-size: 14px;
    }
    .l-select-input-value::placeholder {
      color: #444444;
      font-size: 14px;
    }
    .select-icon {
      position: absolute;
      right: 10px;
      top: 11px;
      color: #94969b;
      transition: all 0.2s ease;
      cursor: pointer;
      transform-origin: 50% 50%;
    }
    .select-icon-tranfromOut {
      transform: rotate(180deg);
    }
    .select-icon-tranfromIn {
      transform: rotate(0deg);
    }
  }
  .l-select-option {
    min-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    top: 100%;
    z-index: 99;
    .l-select-option-find {
      width: 100%;
      max-height: 211px;
      height: auto;
      position: relative;
      margin-top: 13px;
      padding: 4px 0px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid  rgb(217,217,217);
      border-radius: 3px;
      transition: all 0.1s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      &:before {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -15.7px;
        right: 50.27%;
        padding: 0;
        border-bottom: 8px solid #fff;
        border-top: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        display: block;
        content: "";
        z-index: 12;
      }
      &:after {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -18px;
        right: 50%;
        padding: 0;
        border-bottom: 9px solid rgb(217,217,217);
        border-top: 9px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        display: block;
        content: "";
        z-index: 10;
      }
      ul {
        width: 100%;
        max-height: 205px;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: thin;
        margin: 0;
        padding: 0;
        list-style: none;
        li {
          padding: 0 12px;
          line-height: 40px;
          font-size: 14px;
          cursor: pointer;
          color: #444444;
          user-select: none;
          white-space: nowrap;
          display: flex;
          align-items: center;
          position: relative;
          i {
            position: absolute;
            right: 5%;
            display: flex;
            align-items: center;
          }
          &:hover {
            background: rgba(96, 98, 102, 0.1);
          }
        }
        li.l-select-active {
          color: #74baff;
        }
        li.l-select-disabled {
          color: #9d9d9d;
          cursor: no-drop;
          &:hover {
            background-color: #fff;
          }
        }
      }
      ul::-webkit-scrollbar {
        width: 5px;
        height: 1px;
      }

      ul::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #d5d5d6;
      }

      ul::-webkit-scrollbar-track {
        border-radius: 8px;
        background: #fff;
      }
    }
  }
}

// small
.l-select-small {
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  .l-select-input-small {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    input {
      height: 100%;
      width: 100%;
      font-size: 13px;
      outline: none;
      border: 0;
      margin: 0;
      padding: 8px 28px 8px 8px;
      box-sizing: border-box;
      border-radius: 4px;
      color: #606266;
      cursor: pointer;
      border: 1px solid rgb(217,217,217);
      transition: all 0.2s ease;
      &:focus {
        border-color: #74baff;
        box-shadow:  0 0 10px rgba(70, 70, 216, 0.352);
      }
    }
    .l-select-input::placeholder {
      color: #c6c8cc;
      font-size: 14px;
    }
    .l-select-input-value::placeholder {
      color: #444444;
      font-size: 14px;
    }
    .select-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      color: #94969b;
      transition: all 0.2s ease;
      cursor: pointer;
      transform-origin: 50% 50%;
    }
    .select-icon-tranfromOut {
      transform: rotate(180deg);
    }
    .select-icon-tranfromIn {
      transform: rotate(0deg);
    }
  }
  .l-select-option {
    min-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    top: 100%;
    z-index: 99;
    .l-select-option-find {
      width: 100%;
      max-height: 211px;
      height: auto;
      position: relative;
      margin-top: 13px;
      padding: 4px 0px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid rgb(217,217,217);
      border-radius: 3px;
      transition: all 0.1s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      &:before {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -15.7px;
        right: 50.27%;
        padding: 0;
        border-bottom: 8px solid #fff;
        border-top: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        display: block;
        content: "";
        z-index: 12;
      }
      &:after {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -18px;
        right: 50%;
        padding: 0;
        border-bottom: 9px solid rgb(217,217,217);
        border-top: 9px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        display: block;
        content: "";
        z-index: 10;
      }
      ul {
        width: 100%;
        max-height: 205px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
        scrollbar-width: thin;
        li {
          padding: 0 12px;
          line-height: 35px;
          font-size: 13px;
          cursor: pointer;
          color: #444444;
          user-select: none;
          white-space: nowrap;
          i {
            float: right;
          }
          &:hover {
            background: rgba(96, 98, 102, 0.1);
          }
        }
        li.l-select-active {
          color: #74baff;
        }
        li.l-select-disabled {
          color: #9d9d9d;
          cursor: no-drop;
          &:hover {
            background-color: #fff;
          }
        }
      }
      ul::-webkit-scrollbar {
        width: 5px;
        height: 1px;
      }

      ul::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #d5d5d6;
      }

      ul::-webkit-scrollbar-track {
        border-radius: 8px;
        background: #fff;
      }
    }
  }
}

// mini
.l-select-mini {
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  .l-select-input-mini {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    input {
      height: 100%;
      width: 100%;
      font-size: 12px;
      outline: none;
      border: 0;
      margin: 0;
      padding: 7px 26px 7px 6px;
      box-sizing: border-box;
      border-radius: 4px;
      color: #606266;
      cursor: pointer;
      border: 1px solid rgb(217,217,217);
      transition: all 0.2s ease;
      &:focus {
        border-color: #74baff;
        box-shadow: 0 0 10px rgba(70, 70, 216, 0.352);
      }
    }
    .l-select-input::placeholder {
      color: #c6c8cc;
      font-size: 12px;
    }
    .l-select-input-value::placeholder {
      color: #444444;
      font-size: 12px;
    }
    .select-icon {
      position: absolute;
      right: 10px;
      top: 8px;
      color: #94969b;
      transition: all 0.2s ease;
      cursor: pointer;
      transform-origin: 50% 50%;
    }
    .select-icon-tranfromOut {
      transform: rotate(180deg);
    }
    .select-icon-tranfromIn {
      transform: rotate(0deg);
    }
  }
  .l-select-option {
    min-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    top: 100%;
    z-index: 99;
    .l-select-option-find {
      width: 100%;
      max-height: 185px;
      height: auto;
      position: relative;
      margin-top: 13px;
      padding: 4px 0px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid rgb(217,217,217);
      border-radius: 3px;
      transition: all 0.1s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      &:before {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -15.7px;
        right: 50.27%;
        padding: 0;
        border-bottom: 8px solid #fff;
        border-top: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        display: block;
        content: "";
        z-index: 12;
      }
      &:after {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -18px;
        right: 50%;
        padding: 0;
        border-bottom: 9px solid rgb(217,217,217);
        border-top: 9px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        display: block;
        content: "";
        z-index: 10;
      }
      ul {
        width: 100%;
        max-height: 179px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
        scrollbar-width: thin;
        li {
          padding: 0 12px;
          line-height: 32px;
          font-size: 12px;
          cursor: pointer;
          color: #444444;
          user-select: none;
          white-space: nowrap;
          i {
            float: right;
          }
          &:hover {
            background: rgba(96, 98, 102, 0.1);
          }
        }
        li.l-select-active {
          color: #74baff;
        }
        li.l-select-disabled {
          color: #9d9d9d;
          cursor: no-drop;
          &:hover {
            background-color: #fff;
          }
        }
      }
      ul::-webkit-scrollbar {
        width: 5px;
        height: 1px;
      }

      ul::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #d5d5d6;
      }

      ul::-webkit-scrollbar-track {
        border-radius: 8px;
        background: #fff;
      }
    }
  }
}

.l-select-default-disabled {
  cursor: no-drop;
  .l-select-input-default-disabled {
    cursor: no-drop;
    input {
      cursor: no-drop;
    }
    .l-select-input-value::placeholder {
      color: #c6c8cc;
      font-size: 14px;
    }
  }
}
.l-select-small-disabled {
  cursor: no-drop;
  .l-select-input-small-disabled {
    cursor: no-drop;
    input {
      cursor: no-drop;
      color: #c6c8cc;
    }
    .l-select-input-value::placeholder {
      color: #c6c8cc;
      font-size: 14px;
    }
  }
}
.l-select-mini-disabled {
  cursor: no-drop;
  .l-select-input-mini-disabled {
    cursor: no-drop;
    input {
      cursor: no-drop;
    }
    .l-select-input-value::placeholder {
      color: #c6c8cc;
      font-size: 12px;
    }
  }
}
input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #c6c8cc;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 ~ 18 */
  color: #c6c8cc;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color:#c6c8cc;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10 ~ 11 */
  color:#c6c8cc;
}
input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #c6c8cc;
}
.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}