.base {
  font-size: var(--lib_text_size_xxsmall);
  text-transform: capitalize;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-shadow: none;
}
.base
.transition {
  transition: all 200ms ease 0.1s;
}
.disabled {
  pointer-events: none;
  opacity: 0.4;
}
/* cursor */
.loading {
  cursor: progress;
}
.not_allowed {
  cursor: not-allowed;
}
/* transform */
.lowercase {
  text-transform: lowercase;
}
.content {
  display: flex;
  align-items: center;
}
.content_text {
  width: 100%;
}
/*---size---*/
.size_small {
  height: var(--lib_size_28);
  min-width: var(--lib_size_28);
  line-height: 1.5;
}
[dir=ltr] .size_small {
  padding-left: var(--lib_size_4);
  padding-right: var(--lib_size_4);
}
[dir=rtl] .size_small {
  padding-right: var(--lib_size_4);
  padding-left: var(--lib_size_4);
}

.size_medium {
  height: var(--lib_size_32);
  font-size: var(--lib_text_size_xsmall);
  line-height: 1.5;
  min-width: var(--lib_size_32);
}

[dir=ltr] .size_medium {
  padding-left: var(--lib_size_8);
  padding-right: var(--lib_size_8);
}

[dir=rtl] .size_medium {
  padding-right: var(--lib_size_8);
  padding-left: var(--lib_size_8);
}

.size_large {
  height: 40px;
  font-size: var(--lib_text_size_medium);
  line-height: 1.5;
  min-width: var(--lib_size_40);
}

[dir=ltr] .size_large {
  padding-left: var(--lib_size_12);
  padding-right: var(--lib_size_12);
}

[dir=rtl] .size_large {
  padding-right: var(--lib_size_12);
  padding-left: var(--lib_size_12);
}

.size_xlarge {
  font-size: var(--lib_text_size_xmedium);
  line-height: 1.75;
  min-width: var(--lib_size_48);
  height: var(--lib_size_48);
}

[dir=ltr] .size_xlarge {
  padding-left: 16px;
  padding-right: 16px;
}

[dir=rtl] .size_xlarge {
  padding-right: 16px;
  padding-left: 16px;
}

.size_stretch {
  width: 100%;
  height: 100%;
  /* padding: 10px */
  display: block;
  text-align: center;
  padding: var(--lib_size_12) var(--lib_size_25);
}
/* ellipsis */
.ellipsis,.content_text  {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
/*---shape---*/
.shape_circle {
  height: var(--lib_size_42);
  min-width: var(--lib_size_42);
  text-align: center;
  border-radius: var(--lib_border_radius_rounded);
}
.shape_oval {
  border-radius: 16px
}
.shape_square {
  border-radius: var(--lib_border_radius_none);
}

/*---colors---*/
.color_primary.variant_contained { 
  color: var(--lib_base_button_primary_contained_color);
  background-color: var(--lib_base_button_primary_contained_bg); 
  border-color: var(--lib_base_button_primary_contained_border);
}
.color_primary.variant_outlined { 
  color: var(--lib_base_button_primary_outlined_color);
  border-color: var(--lib_base_button_primary_outlined_border); 
  background-color: var(--lib_base_button_primary_outlined_bg);
}
.color_primary.variant_plain { 
  color: var(--lib_base_button_primary_plain_color);
  background-color: var(--lib_base_button_primary_plain_bg); 
  border-color: var(--lib_base_button_primary_plain_border);
}
.color_primary.variant_contained:hover, .color_primary.variant_contained.hovered {
  background-color: var(--lib_base_button_primary_contained_hover_bg); 
  border-color: var(--lib_base_button_primary_contained_hover_border);
}
.color_primary.variant_outlined:hover,
.color_primary.variant_outlined.hovered {
  color: var(--lib_base_button_primary_outlined_hover_color);
}
.color_primary.variant_outlined:hover, .color_primary.variant_outlined.hovered {
  border-color: var(--lib_base_button_primary_outlined_hover_border);
}
.color_primary.variant_plain:hover,
.color_primary.variant_plain.hovered {
  color: var(--lib_base_button_primary_plain_hover_color);
}
.color_secondary.variant_contained {
  color: var(--lib_base_button_secondary_contained_color);
  background-color: var(--lib_base_button_secondary_contained_bg);
  border-color: var(--lib_base_button_secondary_contained_border);
}
.color_secondary.variant_outlined {
  color: var(--lib_base_button_secondary_outlined_color);
  border-color: var(--lib_base_button_secondary_outlined_border);
  background-color: var(--lib_base_button_secondary_outlined_bg);
}
.color_secondary.variant_plain {
  color: var(--lib_base_button_secondary_plain_color);
  background-color: var(--lib_base_button_secondary_plain_bg);
  border-color: var(--lib_base_button_secondary_plain_border);
}
.color_secondary.variant_contained:hover, .color_secondary.variant_contained.hovered {
  background-color: var(--lib_base_button_secondary_contained_hover_bg);
  border-color: var(--lib_base_button_secondary_contained_hover_border);
}
.color_secondary.variant_outlined:hover, .color_secondary.variant_outlined.hovered {
  border-color: var(--lib_base_button_secondary_outlined_hover_border);
}
.color_secondary.variant_plain:hover,
.color_secondary.variant_plain.hovered {
  color: var(--lib_base_button_secondary_plain_hover_color);
}
.color_danger.variant_contained {
  color: var(--lib_base_button_danger_contained_color);
  background-color: var(--lib_base_button_danger_contained_bg);
  border-color: var(--lib_base_button_danger_contained_border);
}
.color_danger.variant_outlined {
  color: var(--lib_base_button_danger_outlined_color);
  border-color: var(--lib_base_button_danger_outlined_border);
  background-color: var(--lib_base_button_danger_outlined_bg);
}
.color_danger.variant_plain {
  color: var(--lib_base_button_danger_plain_color);
  background-color: var(--lib_base_button_danger_plain_bg);
  border-color: var(--lib_base_button_danger_plain_border);
}
.color_danger.variant_contained:hover, .color_danger.variant_contained.hovered {
  background-color: var(--lib_base_button_danger_contained_hover_bg);
  border-color: var(--lib_base_button_danger_contained_hover_border);
}
.color_danger.outlined:hover,
.color_danger.outlined.hovered {
  color: var(--lib_base_button_danger_outlined_hover_color);
}
.color_danger.outlined:hover, .color_danger.outlined.hovered {
  border-color: var(--lib_base_button_danger_outlined_hover_border);
}
.color_danger.variant_plain:hover,
.color_danger.variant_plain.hovered {
  color: var(--lib_base_button_danger_plain_hover_color);
}
.color_success.variant_contained {
  color: var(--lib_base_button_success_contained_color);
  background-color: var(--lib_base_button_success_contained_bg);
  border-color: var(--lib_base_button_success_contained_border);
}
.color_success.variant_outlined {
  color: var(--lib_base_button_success_outlined_color);
  border-color: var(--lib_base_button_success_outlined_border);
  background-color: var(--lib_base_button_success_outlined_bg);
}
.color_success.variant_plain {
  color: var(--lib_base_button_success_plain_color);
  background-color: var(--lib_base_button_success_plain_bg);
  border-color: var(--lib_base_button_success_plain_border);
}
.color_success.variant_contained:hover, .color_success.variant_contained.hovered {
  background-color: var(--lib_base_button_success_contained_hover_bg);
  border-color: var(--lib_base_button_success_contained_hover_border);
}
.color_success.variant_outlined:hover,
.color_success.variant_outlined.hovered {
  color: var(--lib_base_button_success_outlined_hover_color);
}
.color_success.variant_outlined:hover, .color_success.variant_outlined.hovered {
  border-color: var(--lib_base_button_success_outlined_hover_border);
}
.color_success.variant_plain:hover,
.color_success.variant_plain.hovered {
  color: var(--lib_base_button_success_plain_hover_color);
}

.start_icon {
  display: flex;
}

[dir=ltr] .start_icon {
  margin: 0 var(--lib_size_5) 0 0;
}

[dir=rtl] .start_icon {
  margin: 0 0 0 var(--lib_size_5);
}
.end_icon {
  display: flex;
}
[dir=ltr] .end_icon {
  margin: 0 0 0 var(--lib_size_5);
}
[dir=rtl] .end_icon {
  margin: 0 var(--lib_size_5) 0 0;
}


/* TempCss */
/*opacity*/
.opacity {
  filter: alpha(opacity=40);
  -moz-opacity: 0.004;
  opacity: 0.004;
}
