body {
  background-color: $base-bg;
  color: $base-color;
}

a {
  color: inherit;
  cursor: pointer;

  &.ui-tag-readonly {
    cursor: default;
  }
}

%hr {
  border-bottom: 1px solid $divider-hilight;
  border-top: 1px solid var(--divider-bg, $divider-bg);
}

%vr {
  border-left: 1px solid var(--divider-bg, $divider-bg);
  border-right: 1px solid $divider-hilight;
}

%vr-dark {
  border-left-color: $shadow;
  border-right-color: $white;
}

hr {
  @extend %hr;
  margin: 0.5rem 0;
}

::-webkit-input-placeholder {
  color: $input-placeholder;
}

::-moz-placeholder {
  color: $input-placeholder;
}

::-ms-input-placeholder {
  color: $input-placeholder;
}

:-ms-input-placeholder {
  color: $input-placeholder;
}

::-o-placeholder {
  color: $input-placeholder;
}

::placeholder {
  color: $input-placeholder;
}

.ui {
  &-text-divider {
    border: 1px solid $base-border-color;
  }

  &-border {

    &,
    &--xy {
      border-color: $base-border-color;
    }

    &--x {
      @include property-prefix(border-start-color, $base-border-color, border-left);
      @include property-prefix(border-end-color, $base-border-color, border-right);
    }

    &--s {
      @include property-prefix(border-start-color, $base-border-color, border-left);
    }

    &--e {
      @include property-prefix(border-end-color, $base-border-color, border-right);
    }

    &--y {
      border-bottom-color: $base-border-color;
      border-top-color: $base-border-color;
    }

    &--t {
      border-top-color: $base-border-color;
    }

    &--b {
      border-bottom-color: $base-border-color;
    }
  }

  &-shadow,
  &-icon--round,
  &-shadow--0 {
    box-shadow: $shadow-level0;
  }

  &-paper,
  &-shadow--1 {
    box-shadow: $shadow-level1;
  }

  &-shadow--2 {
    box-shadow: $shadow-level2;
  }

  &-shadow--3 {
    box-shadow: $shadow-level3;
  }

  &-shadow--4 {
    box-shadow: $shadow-level4;
  }

  @each $label,
  $color in $colors {
    &-bg--#{$label} {
      background-color: $color;
    }

    &-color--#{$label} {
      color: $color;
    }

    &-border--#{$label} {
      border-color: $color;
    }

    &-hover--#{$label} {
      @at-root &:hover {
        color: $color;
      }

      @at-root &[data-type="tool"] .ui-btn:hover {
        color: $color;
      }
    }

    &-hover--bg-#{$label} {
      @at-root &:hover {
        background-color: $color;
      }

      @at-root &[data-type="tool"] .ui-btn:hover {
        background-color: $color;
      }
    }
  }
}

.ui-page {
  &__chat {
    background-color: var(--primary, $primary);
    color: $white;
  }
}

.ui-loader {
  background-color: rgba($white, 0.1);

  >div {
    background-color: $base-component-bg;
    box-shadow: $shadow-level3;
    color: var(--primary, $primary);
  }
}

.ui-drop {
  &__body {
    background-color: $base-component-bg;
    box-shadow: $shadow-level3;
  }
}

.ui-progress-ring {
  &__circle {
    stroke: $info;
  }
}

ux-dialog {
  &-overlay {
    opacity: 0;

    &.active {
      background-color: black;
      opacity: 0.5;
    }
  }

  &-container {
    opacity: 0;

    &.active {
      opacity: 1;
    }
  }

  & {
    background-color: $white;

    >ux-dialog-body {
      background-color: inherit;
    }
  }

  &.editDialog {
    >ux-dialog-header {
      background-color: var(--ux-dialog-background-header, $ux-dialog-background-header);
      color: var(--ux-dialog-color-header, $ux-dialog-color-header);
    }

    >ux-dialog-footer {
      color: $ux-dialog-color-footer;
      background-color: $ux-dialog-background-footer;
      box-shadow: 5px -5px 10px #e3e7eb;
    }

    &.ui-dialog {
      &-left {
        >ux-dialog-footer {
          box-shadow: -5px -5px 10px #e3e7eb;
        }
      }
    }
  }
}

.editBox,
.questionBox,
.notificationBox,
.warningBox,
.errorBox {
  box-shadow: 8px 10px 6px -6px rgba(0, 0, 0, 0.35);

  & .modal-body {
    & div {
      & i {
        font-size: 20px;
        font-style: normal;
      }
    }
  }
}