.base {
  cursor: pointer;
  position: relative;
  font-size: var(--lib_text_size_xxsmall);
  text-transform: capitalize;
  border: none;
  border-radius: 4px;
  box-shadow: none;
}
.text{
  color: var(--lib_button_plain_text_clr);
  border: var(--lib_border_size_xsmall) solid var(--lib_button_plain_border_clr);
  background-color: var(--lib_button_plain_bg_clr);
}
.text:hover{
  color: var(--lib_button_plain_hover_text_clr);
  border: var(--lib_border_size_xsmall) solid var(--lib_button_plain_hover_border_clr);
  background-color: var(--lib_button_plain_hover_bg_clr);
}
.contained{
  color: var(--lib_button_contained_text_clr);
  /* border: var(--lib_border_size_xsmall) solid var(--lib_button_contained_border_clr); */
  background-color: var(--lib_button_contained_bg_clr);
}
.contained:hover{
  color: var(--lib_button_contained_hover_text_clr);
  /* border: var(--lib_border_size_xsmall) solid var(--lib_button_contained_hover_border_clr); */
  background-color: var(--lib_button_contained_hover_bg_clr);
}
.outlined{
  color: var(--lib_button_outlined_text_clr);
  border: var(--lib_border_size_xsmall) solid var(--lib_button_outlined_border_clr);
  background-color: var(--lib_button_outlined_bg_clr);
}
.outlined:hover{
  color: var(--lib_button_outlined_hover_text_clr);
  border: var(--lib_border_size_xsmall) solid var(--lib_button_outlined_hover_border_clr);
  background-color: var(--lib_button_outlined_hover_bg_clr);
}
/*---variant---*/
/* .contained {
  color: var(--local_solid_text_color);
  background-color: var(--local_solid_bg_color);
}
.contained:hover {
  background-color: var(--local_solid_hover_bg_color);
} */
/* .outlined {
  border-style: solid;
  border-width: 1px;
  border-color: var(--local_light_border_color);
  background-color: var(--local_light_bg_color);
  color: var(--local_light_text_color);
}
.outlined:hover {
  border-color: var(--local_light_hover_border_color);
  background-color: var(--local_light_hover_bg_color);
  color: var(--local_light_hover_text_color);
} */
/* .text {
  color: var(--local_text_color);
  background-color: var(--local_text_bg_color);
}
.text:hover {
  color: var(--local_text_hover_color);
  background-color: var(--local_text_hover_bg_color);
} */

.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%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
/*---size---*/
.size_sm {
  height: 1.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  min-width: 1.75rem;
  line-height: 1rem;
}

.size_md {
  height: 2rem;
  font-size: var(--lib_text_size_xsmall);
  line-height: 1.5rem;
  min-width: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.size_lg {
  height: 2.5rem;
  font-size: var(--lib_text_size_medium);
  line-height: 1.5rem;
  min-width: 2.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.size_xl {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: var(--lib_text_size_xmedium);
  line-height: 1.75rem;
  min-width: 3rem;
  height: 3rem;
}

.stretch {
  width: 100%;
  height: 100%;
}
/* ellipsis */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
/*---shape---*/
.shape_circle {
  text-align: center;
  height: 42px;
  min-width: 42px;
  border-radius: var(--lib_border_radius_rounded);
}
.shape_oval {
  border-radius: var(--lib_border_radius_medium);
}
.shape_square {
  border-radius: var(--lib_border_radius_none);
}

/*---colors---*/
.primary.contained {
  background-color: var(--lib_button_primary_contained_bg_clr); 
  color: var(--lib_button_primary_contained_txt_clr); 
  border-color: var(--lib_button_primary_contained_bdr_clr);
}
.primary.outlined {
  border-color: var(--lib_button_primary_outlined_bdr_clr); 
  background-color: var(--lib_button_primary_outlined_bg_clr); 
  color: var(--lib_button_primary_outlined_txt_clr); 
}
.primary.text {
  background-color: var(--lib_button_primary_text_bg_clr); 
  color: var(--lib_button_primary_text_txt_clr); 
  border-color: var(--lib_button_primary_text_bdr_clr) ;
}
.primary.contained:hover,
.primary.contained.hovered {
  background-color: var(--lib_button_primary_contained_hover_bg_clr); 
  border-color: var(--lib_button_primary_contained_hover_bdr_clr) ;
  color: var(--lib_button_primary_contained_hover_txt_clr);
}
.primary.outlined:hover,
.primary.outlined.hovered {
  border-color: var(--lib_button_primary_outlined_hover_bdr_clr); 
  background-color: var(--lib_button_primary_outlined_hover_bg_clr); 
  color: var(--lib_button_primary_outlined_hover_txt_clr); 
}
.primary.text:hover,
.primary.text.hovered {
  background-color: var(--lib_button_primary_text_hover_bg_clr); 
  color: var(--lib_button_primary_text_hover_txt_clr); 
  border-color: var(--lib_button_primary_text_hover_bdr_clr);
}
.secondary.contained {
  background-color: var(--lib_button_secondary_contained_bg_clr);
  color: var(--lib_button_secondary_contained_txt_clr);
  border-color: var(--lib_button_secondary_contained_bdr_clr);
}
.secondary.outlined {
  border-color: var(--lib_button_secondary_outlined_bdr_clr);
  background-color: var(--lib_button_secondary_outlined_bg_clr);
  color: var(--lib_button_secondary_outlined_txt_clr);
}
.secondary.text {
  background-color: var(--lib_button_secondary_text_bg_clr);
  color: var(--lib_button_secondary_text_txt_clr);
  border-color: var(--lib_button_secondary_text_bdr_clr);
}
.secondary.contained:hover,
.secondary.contained.hovered {
  background-color: var(--lib_button_secondary_contained_hover_bg_clr);
  border-color: var(--lib_button_secondary_contained_hover_bdr_clr);
  color: var(--lib_button_secondary_contained_hover_txt_clr);
}
.secondary.outlined:hover,
.secondary.outlined.hovered {
  border-color: var(--lib_button_secondary_outlined_hover_bdr_clr);
  background-color: var(--lib_button_secondary_outlined_hover_bg_clr);
  color: var(--lib_button_secondary_outlined_hover_txt_clr);
}
.secondary.text:hover,
.secondary.text.hovered {
  background-color: var(--lib_button_secondary_text_hover_bg_clr);
  color: var(--lib_button_secondary_text_hover_txt_clr);
  border-color: var(--lib_button_secondary_text_hover_bdr_clr);
}
.danger.contained {
  background-color: var(--lib_button_danger_contained_bg_clr);
  color: var(--lib_button_danger_contained_txt_clr);
  border-color: var(--lib_button_danger_contained_bdr_clr);
}
.danger.outlined {
  border-color: var(--lib_button_danger_outlined_bdr_clr);
  background-color: var(--lib_button_danger_outlined_bg_clr);
  color: var(--lib_button_danger_outlined_txt_clr);
}
.danger.text {
  background-color: var(--lib_button_danger_text_bg_clr);
  color: var(--lib_button_danger_text_txt_clr);
  border-color: var(--lib_button_danger_text_bdr_clr);
}
.danger.contained:hover,
.danger.contained.hovered {
  background-color: var(--lib_button_danger_contained_hover_bg_clr);
  border-color: var(--lib_button_danger_contained_hover_bdr_clr);
  color: var(--lib_button_danger_contained_hover_txt_clr);
}
.danger.outlined:hover,
.danger.outlined.hovered {
  border-color: var(--lib_button_danger_outlined_hover_bdr_clr);
  background-color: var(--lib_button_danger_outlined_hover_bg_clr);
  color: var(--lib_button_danger_outlined_hover_txt_clr);
}
.danger.text:hover,
.danger.text.hovered {
  background-color: var(--lib_button_danger_text_hover_bg_clr);
  color: var(--lib_button_danger_text_hover_txt_clr);
  border-color: var(--lib_button_danger_text_hover_bdr_clr);
}
.success.contained {
  background-color: var(--lib_button_success_contained_bg_clr);
  color: var(--lib_button_success_contained_txt_clr);
  border-color: var(--lib_button_success_contained_bdr_clr);
}
.success.outlined {
  border-color: var(--lib_button_success_outlined_bdr_clr);
  background-color: var(--lib_button_success_outlined_bg_clr);
  color: var(--lib_button_success_outlined_txt_clr);
}
.success.text {
  background-color: var(--lib_button_success_text_bg_clr);
  color: var(--lib_button_success_text_txt_clr);
  border-color: var(--lib_button_success_text_bdr_clr);
}
.success.contained:hover,
.success.contained.hovered {
  background-color: var(--lib_button_success_contained_hover_bg_clr);
  border-color: var(--lib_button_success_contained_hover_bdr_clr);
  color: var(--lib_button_success_contained_hover_txt_clr);
}
.success.outlined:hover,
.success.outlined.hovered {
  border-color: var(--lib_button_success_outlined_hover_bdr_clr);
  background-color: var(--lib_button_success_outlined_hover_bg_clr);
  color: var(--lib_button_success_outlined_hover_txt_clr);
}
.success.text:hover,
.success.text.hovered {
  background-color: var(--lib_button_success_text_hover_bg_clr);
  color: var(--lib_button_success_text_hover_txt_clr);
  border-color: var(--lib_button_success_text_hover_bdr_clr);
}

.startIcon {
  margin: 0 5px 0 0;
  display: flex;
}
.end_icon {
  margin: 0 0 0 5px;
  display: flex;
}
.primary:hover,
.secondary:hover,
.text:hover,
.hovered,
.active,
.focused {
  box-shadow: 0 5px 5px rgb(0 0 0 / 16%);
}



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