@import "../../message/popover/popover.css";
@import "../../template/border/border.css";
@import "../../base/tag/tag.css";

:root {
  --m-select-h: 38px;
  --m-select-w: calc(var(--m-input-w) + 14px);
  --m-select-dropdown-w: var(--m-input-w);
  /* todo fix input-w */
  --m-input-w: 244px;
  --m-input-h: 31px;
}

.m-select {
  display: inline-flex;
  width: var(--m-select-w);
  min-height: var(--m-select-h);
  line-height: var(--m-select-h);
}

.m-select-options {
  --m-option-bg-hover: #e6e6e6a6;
  --m-option-bg-active: #c9c9c9a6;

  width: var(--m-select-dropdown-w);

  .m-option {
    margin: 4px 4px;
    padding: 2px 4px;
    border-radius: 5px;

    &:hover {
      background-color: var(--m-option-bg-hover);
    }

    &.m-option-selected {
      background: var(--m-option-bg-active);
    }
  }

  .m-select-option-wrapper {
    display: flex;
    align-items: center;
  }

  .m-option-checked {
    background: var(--m-option-bg-active);
    border-radius: 2px;
    height: 100%;
    width: 100%;
  }
}

.m-select-empty-span {
  display: inline-block;
  margin: 4px 5px;
  color: var(--m-color-disabled);
}

.m-select-multiple-placeholder {
  color: #757575;
  font-size: 13px;
  margin: 0 10px;
  line-height: var(--m-select-h);
}


.m-select-multiple {
  display: inline-grid;
  min-width: var(--m-input-w);
  line-height: var(--m-input-h);
  box-sizing: content-box;
  border: 3px double transparent;

  .m-tag {
    display: flex;
    margin: 4px;
    position: sticky;

    .m-tag-main {
      white-space: nowrap;
      padding-right: 10px;
    }
  }
}

.m-select-multiple-inner {
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: top;
  align-items: center;
  min-height: var(--m-select-h);
  padding: 0 3px;
}

.m-select-multiple-input {
  background-color: unset !important;
  background-repeat: no-repeat !important;
  padding: 0 10px;
  border: none !important;
  outline: none !important;
  height: 31px;
  line-height: 31px;
}


@keyframes shake {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-1deg);
  }

  50% {
    transform: rotate(1deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

.m-select-tag-delete-icon {
  display: inline-block;
  vertical-align: top;
  position: absolute;
  right: -10px;
  top: 2px;
  transform-origin: left top;

  &:hover {
    animation: shake 0.4s 2;
  }
}

.m-select-loading {
  width: 100%;
  display: flex;
  justify-content: center;
}

.m-select-tag-wrapper {
  position: relative;
}