@use './variables-global' as *;
@use './variables';
@use './fonts';

@use './icon';
@use './form';
@use './input';
@use './avatar';
@use './image';
@use './button';
@use './dropdown';
@use './pagination';
@use './select';
@use './slideshow';
@use './date_picker';
@use './message_box';
@use './page_header';
@use './tabs';

.sh-overlay {
  background-color: transparent;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: .3s;
  visibility: hidden;
  width: 100%;
  z-index: 999;
}

.open .sh-overlay {
  opacity: 1;
  visibility: visible;
}

.visible_overlay .sh-overlay {
  background-color: rgba(0, 0, 0, 0);
  transition: .3s;
}

.visible_overlay.open .sh-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.sh-reset {
  color: #808080;
}

.sh-control {
  background-color: #fbfbfb;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  display: flex;
  gap: 10px;
  padding: 0 10px;
  transition: 0.3s;
}

.sh-control .icon {
  align-items: center;
  color: #777;
  display: flex;
  flex: 10px 0 0;
  height: 100%;
  justify-content: center;
}

.sh-control-xs {
  font-size: 13px;
  height: 28px;
}

.sh-control-sm {
  font-size: 13px;
  height: 30px;
}

.sh-control-md {
  font-size: 14px;
  height: 32px;
}

.sh-control-lg {
  font-size: 15px;
  height: 34px;
}

.sh-control-xl {
  font-size: 15px;
  height: 36px;
}

.control-focus {
  background-color: #f9f9f9;
  border-color: $primary_color;
}

.control-focus .icon {
  color: $primary_color;
}

.control-value {
  background-color: #fbfbfb;
  border-color: #cfcfcf;
}

.control-value .icon {
  color: $primary_color_text;
}

.control-disabled,
.control-disabled:hover {
  background-color: #dcdcdc;
  border-color: #afafaf;
  cursor: not-allowed;
}

.control-disabled.btn,
.control-disabled.btn:hover {
  background-color: #b9b9b9;
  border-color: #b9b9b9;
}

.control-disabled input {
  cursor: not-allowed;
}