.base {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.selectedContent{
  display: flex;
  align-items: center;
}
.select{
  box-sizing: border-box;
}
[dir=ltr] .select{
    padding: var(--lib_size_7) var(--lib_size_30) var(--lib_size_7) var(--lib_size_10);
}
[dir=rtl] .select{
  padding: var(--lib_size_7) var(--lib_size_10) var(--lib_size_7) var(--lib_size_30);
}

.option:hover{
  /* background-color: #f1f7fe; */
}

.select[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
  color: var(--lib_base_select_placeholder_color);
}
.optionContainer{
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 220px;
  overflow: auto;
  box-shadow: 0px -3px 30px var(--lib_base_select_optioncontainer_shadow);
  border:none;
}

.select::placeholder,
.select.disabled {
  opacity: 0.5;
}
.disabled {
  border-color: var(--lib_base_select_disabled_border);
  cursor: not-allowed;
}
.size_small {
  height: var(--lib_size_30);
}
.size_medium {
  height: var(--lib_size_35);
}
.size_large {
  height: var(--lib_size_40);
}
/* .size_stretch {
  height: 40px;
} */

.variant_plain, .variant_outlined, .variant_contained {
  border-width: 1px;
  border-style: solid;
}

.variant_flushed {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* primary */
.color_primary.variant_plain {
  color: var(--lib_base_select_primary_plain_color);
  border-color: var(--lib_base_select_primary_plain_border);
  background-color: var(--lib_base_select_primary_plain_bg);
}
.color_primary.variant_plain:hover,
.color_primary.variant_plain.hovered {
  color: var(--lib_base_select_primary_plain_hover_color);
}
.color_primary.variant_plain:hover, .color_primary.variant_plain.hovered {
  border-color: var(--lib_base_select_primary_plain_hover_border);
  background-color: var(--lib_base_select_primary_plain_hover_bg);
}

.color_primary.variant_flushed {
  color: var(--lib_base_select_primary_flushed_color);
  border-color: var(--lib_base_select_primary_flushed_border);
  background-color: var(--lib_base_select_primary_flushed_bg);
}

.color_primary.variant_flushed:hover,
.color_primary.variant_flushed.hovered {
  color: var(--lib_base_select_primary_flushed_hover_color);
}

.color_primary.variant_flushed:hover, .color_primary.variant_flushed.hovered {
  border-color: var(--lib_base_select_primary_flushed_hover_border);
  background-color: var(--lib_base_select_primary_flushed_hover_bg);
}

.color_primary.variant_outlined {
  color: var(--lib_base_select_primary_outlined_color);
  border-color: var(--lib_base_select_primary_outlined_border);
  background-color: var(--lib_base_select_primary_outlined_bg);
}

.color_primary.variant_outlined:hover,
.color_primary.variant_outlined.hovered {
  color: var(--lib_base_select_primary_outlined_hover_color);
}

.color_primary.variant_outlined:hover, .color_primary.variant_outlined.hovered {
  border-color: var(--lib_base_select_primary_outlined_hover_border);
  background-color: var(--lib_base_select_primary_outlined_hover_bg);
}

.color_primary.variant_contained {
  color: var(--lib_base_select_primary_contained_color);
  border-color: var(--lib_base_select_primary_contained_border);
  background-color: var(--lib_base_select_primary_contained_bg);
}
.color_primary.variant_contained:hover,
.color_primary.variant_contained.hovered {
  color: var(--lib_base_select_primary_contained_hover_color);
}
.color_primary.variant_contained:hover, .color_primary.variant_contained.hovered {
  border-color: var(--lib_base_select_primary_contained_hover_border);
  background-color: var(--lib_base_select_primary_contained_hover_bg);
}

/* secondary */
.color_secondary.variant_plain {
  color: var(--lib_base_select_secondary_plain_color);
  border-color: var(--lib_base_select_secondary_plain_border);
  background-color: var(--lib_base_select_secondary_plain_bg);
}
.color_secondary.variant_plain:hover,
.color_secondary.variant_plain.hovered {
  color: var(--lib_base_select_secondary_plain_hover_color);
}
.color_secondary.variant_plain:hover, .color_secondary.variant_plain.hovered {
  border-color: var(--lib_base_select_secondary_plain_hover_border);
  background-color: var(--lib_base_select_secondary_plain_hover_bg);
}

.color_secondary.variant_flushed {
  color: var(--lib_base_select_secondary_flushed_color);
  border-color: var(--lib_base_select_secondary_flushed_border);
  background-color: var(--lib_base_select_secondary_flushed_bg);
}

.color_secondary.variant_flushed:hover,
.color_secondary.variant_flushed.hovered {
  color: var(--lib_base_select_secondary_flushed_hover_color);
}

.color_secondary.variant_flushed:hover, .color_secondary.variant_flushed.hovered {
  border-color: var(--lib_base_select_secondary_flushed_hover_border);
  background-color: var(--lib_base_select_secondary_flushed_hover_bg);
}

.color_secondary.variant_outlined {
  color: var(--lib_base_select_secondary_outlined_color);
  border-color: var(--lib_base_select_secondary_outlined_border);
  background-color: var(--lib_base_select_secondary_outlined_bg);
}

.color_secondary.variant_outlined:hover,
.color_secondary.variant_outlined.hovered {
  color: var(--lib_base_select_secondary_outlined_hover_color);
}

.color_secondary.variant_outlined:hover, .color_secondary.variant_outlined.hovered {
  border-color: var(--lib_base_select_secondary_outlined_hover_border);
  background-color: var(--lib_base_select_secondary_outlined_hover_bg);
}

.color_secondary.variant_contained {
  color: var(--lib_base_select_secondary_contained_color);
  border-color: var(--lib_base_select_secondary_contained_border);
  background-color: var(--lib_base_select_secondary_contained_bg);
}
.color_secondary.variant_contained:hover,
.color_secondary.variant_contained.hovered {
  color: var(--lib_base_select_secondary_contained_hover_color);
}
.color_secondary.variant_contained:hover, .color_secondary.variant_contained.hovered {
  border-color: var(--lib_base_select_secondary_contained_hover_border);
  background-color: var(--lib_base_select_secondary_contained_hover_bg);
}
/* danger */
.color_danger.variant_plain {
  color: var(--lib_base_select_danger_plain_color);
  border-color: var(--lib_base_select_danger_plain_border);
  background-color: var(--lib_base_select_danger_plain_bg);
}
.color_danger.variant_plain:hover,
.color_danger.variant_plain.hovered {
  color: var(--lib_base_select_danger_plain_hover_color);
}
.color_danger.variant_plain:hover, .color_danger.variant_plain.hovered {
  border-color: var(--lib_base_select_danger_plain_hover_border);
  background-color: var(--lib_base_select_danger_plain_hover_bg);
}

.color_danger.variant_flushed {
  color: var(--lib_base_select_danger_flushed_color);
  border-color: var(--lib_base_select_danger_flushed_border);
  background-color: var(--lib_base_select_danger_flushed_bg);
}

.color_danger.variant_flushed:hover,
.color_danger.variant_flushed.hovered {
  color: var(--lib_base_select_danger_flushed_hover_color);
}

.color_danger.variant_flushed:hover, .color_danger.variant_flushed.hovered {
  border-color: var(--lib_base_select_danger_flushed_hover_border);
  background-color: var(--lib_base_select_danger_flushed_hover_bg);
}

.color_danger.variant_outlined {
  color: var(--lib_base_select_danger_outlined_color);
  border-color: var(--lib_base_select_danger_outlined_border);
  background-color: var(--lib_base_select_danger_outlined_bg);
}

.color_danger.variant_outlined:hover,
.color_danger.variant_outlined.hovered {
  color: var(--lib_base_select_danger_outlined_hover_color);
}

.color_danger.variant_outlined:hover, .color_danger.variant_outlined.hovered {
  border-color: var(--lib_base_select_danger_outlined_hover_border);
  background-color: var(--lib_base_select_danger_outlined_hover_bg);
}

.color_danger.variant_contained {
  color: var(--lib_base_select_danger_contained_color);
  border-color: var(--lib_base_select_danger_contained_border);
  background-color: var(--lib_base_select_danger_contained_bg);
}
.color_danger.variant_contained:hover,
.color_danger.variant_contained.hovered {
  color: var(--lib_base_select_danger_contained_hover_color);
}
.color_danger.variant_contained:hover, .color_danger.variant_contained.hovered {
  border-color: var(--lib_base_select_danger_contained_hover_border);
  background-color: var(--lib_base_select_danger_contained_hover_bg);
}
/* success */
.color_success.variant_plain {
  color: var(--lib_base_select_success_plain_color);
  border-color: var(--lib_base_select_success_plain_border);
  background-color: var(--lib_base_select_success_plain_bg);
}
.color_success.variant_plain:hover,
.color_success.variant_plain.hovered {
  color: var(--lib_base_select_success_plain_hover_color);
}
.color_success.variant_plain:hover, .color_success.variant_plain.hovered {
  border-color: var(--lib_base_select_success_plain_hover_border);
  background-color: var(--lib_base_select_success_plain_hover_bg);
}

.color_success.variant_flushed {
  color: var(--lib_base_select_success_flushed_color);
  border-color: var(--lib_base_select_success_flushed_border);
  background-color: var(--lib_base_select_success_flushed_bg);
}

.color_success.variant_flushed:hover,
.color_success.variant_flushed.hovered {
  color: var(--lib_base_select_success_flushed_hover_color);
}

.color_success.variant_flushed:hover, .color_success.variant_flushed.hovered {
  border-color: var(--lib_base_select_success_flushed_hover_border);
  background-color: var(--lib_base_select_success_flushed_hover_bg);
}

.color_success.variant_outlined {
  color: var(--lib_base_select_success_outlined_color);
  border-color: var(--lib_base_select_success_outlined_border);
  background-color: var(--lib_base_select_success_outlined_bg);
}

.color_success.variant_outlined:hover,
.color_success.variant_outlined.hovered {
  color: var(--lib_base_select_success_outlined_hover_color);
}

.color_success.variant_outlined:hover, .color_success.variant_outlined.hovered {
  border-color: var(--lib_base_select_success_outlined_hover_border);
  background-color: var(--lib_base_select_success_outlined_hover_bg);
}

.color_success.variant_contained {
  color: var(--lib_base_select_success_contained_color);
  border-color: var(--lib_base_select_success_contained_border);
  background-color: var(--lib_base_select_success_contained_bg);
}
.color_success.variant_contained:hover,
.color_success.variant_contained.hovered {
  color: var(--lib_base_select_success_contained_hover_color);
}
.color_success.variant_contained:hover, .color_success.variant_contained.hovered {
  border-color: var(--lib_base_select_success_contained_hover_border);
  background-color: var(--lib_base_select_success_contained_hover_bg);
}
/*  */
.arrow{
  position: absolute;
  top: var(--lib_size_5);
  font-size: var(--lib_fsize_11);
  color: var(--lib_base_select_arrow_color);
}
[dir=ltr] .arrow{
    transform: rotate(45deg);
    right: var(--lib_size_10);
}
[dir=rtl] .arrow{
  transform: rotate(-45deg);
  left: var(--lib_size_10);
}
.arrowlg{
  top: var(--lib_size_7);
}

/* searcch impl */
.baseSearch
{
  width: 100%;
  position: relative;
}
.optionContainerSearch
{
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px -3px 30px var(--lib_base_select_optioncontainer_shadow);
}
.flexAuto
{
  flex: 1;
  overflow: auto;

}
.searchBox
{
  padding: var(--lib_size_4);
  background-color: var(--lib_base_select_searchBox_bg);
}
.selectedValue
{
  border-bottom:1px solid var(--lib_base_select_selectedValue_border);
  padding-bottom: var(--lib_size_5);
  cursor: pointer;
}
.icon{
  width: var(--lib_size_12);
  height: var(--lib_size_12);
}
[dir=ltr] .rotate{
    transform: rotate3d(1,0,0,180deg);
}
[dir=rtl] .rotate{
  transform: rotate3d(-1,0,0,-180deg);
}
.iconBase{
  width: inherit;
  height: inherit;
}
.focus3{
  background-color: var(--lib_base_select_focus3_bg);
}
.input{
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* margin: 5px; */
  width: 100%;
  box-sizing: border-box;
  background: var(--lib_base_select_input_bg);
  border-width: 0;
  border: 1px solid var(--lib_base_select_input_border);
  padding: var(--lib_size_4);
}




/* box position */
.topStart {
  bottom: 100%;
}
[dir=ltr] .topStart {
    right: 0;
}
[dir=rtl] .topStart {
  left: 0;
}
.topEnd {
  bottom: 100%;
}
[dir=ltr] .topEnd {
    left: 0;
}
[dir=rtl] .topEnd {
  right: 0;
}
.topMid {
  bottom: 100%;
}
[dir=ltr] .topMid {
    left: 50%;
    transform: translateX(-50%);
}
[dir=rtl] .topMid {
  right: 50%;
  transform: translateX(50%);
}
.bottomStart {
  top: 100%;
}
[dir=ltr] .bottomStart {
    right: 0;
}
[dir=rtl] .bottomStart {
  left: 0;
}
.bottomEnd {
  top: 100%;
}
[dir=ltr] .bottomEnd {
    left: 0;
}
[dir=rtl] .bottomEnd {
  right: 0;
}
.bottomMid {
  top: 100%;
}
[dir=ltr] .bottomMid {
    left: 50%;
    transform: translateX(-50%);
}
[dir=rtl] .bottomMid {
  right: 50%;
  transform: translateX(50%);
}
.rightStart {
  bottom: 0;
}
[dir=ltr] .rightStart {
    left: 100%;
}
[dir=rtl] .rightStart {
  right: 100%;
}
.rightEnd {
  top: 0;
}
[dir=ltr] .rightEnd {
    left: 100%;
}
[dir=rtl] .rightEnd {
  right: 100%;
}
.rightMid {
  top: 50%;
  transform: translateY(-50%);
}
[dir=ltr] .rightMid {
    left: 100%;
}
[dir=rtl] .rightMid {
  right: 100%;
}
.leftStart {
  bottom: 0;
}
[dir=ltr] .leftStart {
    right: 100%;
}
[dir=rtl] .leftStart {
  left: 100%;
}
.leftEnd {
  top: 0;
}
[dir=ltr] .leftEnd {
    right: 100%;
}
[dir=rtl] .leftEnd {
  left: 100%;
}
.leftMid {
  top: 50%;
  transform: translateY(-50%);
}
[dir=ltr] .leftMid {
    right: 100%;
}
[dir=rtl] .leftMid {
  left: 100%;
}



.arrowIcon{
  --lib_icon_size:25px;
  transition : transform 0.4s;
}

.arrowRotate{
  --lib_icon_size:25px;
  transition : transform 0.4s;
}

[dir=ltr] .arrowRotate{
    transform: rotate(180deg);
}

[dir=rtl] .arrowRotate{
  transform: rotate(-180deg);
}