.ui-panel-base {
  background-color: $base-theme;
}

.ui-header {
  &__actions {
    >.ui-divider {
      @extend %vr;
    }
  }

  &::after {
    @extend %hr;
    border-top-width: 3px;
    border-bottom: none;
    opacity: 1 !important;
  }
}

.ui-footer {
  color: $base-muted;

  &::after {
    @extend %hr;
  }
}

.ui-panel {
  margin-bottom: 1rem;
  box-shadow:
    0 1px 0px rgba(0, 0, 0, 0.02),
    0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  &:hover {
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.13);
  }

  &.ui-paper {
    box-shadow: $shadow-level2;
  }

  $base: unquote(".ui-panel");

  &__header {
    background-color: $base-component-bg;

    &__actions {
      >.ui-divider {
        @extend %vr;
      }
    }
  }

  &[data-expanded="true"] {
    box-shadow: 0 0 4em rgba(0, 0, 0, 0.9);
  }

  @mixin make-panel-variable($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      #{$base}__header {
        background-color: $theme-color;
        color: var(--#{$theme}-reverse);

        .ui-divider {
          @extend %vr-dark;
        }
      }
    }
  }

  @mixin make-panel($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      #{$base}__header {
        background-color: $theme-color;
        color: set-color($theme-color);

        .ui-divider {
          @extend %vr-dark;
        }
      }
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-panel-variable($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-panel($label, $color);
  }
}

.ui-card {
  @extend .ui-paper;

  $base: unquote(".ui-card");

  &__meta {
    color: $base-muted;
  }

  &__media {
    >#{$base}__title {
      background-color: rgba($black, 0.7);
      color: $white;
    }
  }

  .ui-divider {
    @extend %hr;
  }
}

a {
  &:hover>.ui-card {
    box-shadow: $shadow-level3;
  }

  &[data-disabled="true"]>.ui-card {
    box-shadow: $shadow-level0;
  }
}

.ui-tab {
  &__panel {
    &--noborder {
      .ui-tab__body {
        border-color: transparent;
      }
    }

    &:not([data-align="bottom"]) {
      .ui-tab__body {
        border-top-color: var(--primary, $primary);
      }
    }

    &[data-align="bottom"] {
      .ui-tab__button {
        &[data-active="true"] {
          box-shadow:
            0 1px 0 0 $base-component-bg inset,
            0 3px 0 0 var(--primary, $primary),
            0 0 0 1px var(--primary, $primary) inset;
        }
      }

      .ui-tab__body {
        border-bottom-color: var(--primary, $primary);
      }
    }
  }

  &__bar {
    &__overflow {
      .ui-menu {
        .ui-tab__button {
          box-shadow: none;

          &[data-active="true"] {
            background-color: var(--primary-50, rgba($primary, 0.5));
            margin: 0;
            border-radius: 0;
          }
        }
      }
    }
  }

  &__button {
    background-color: $base-component-bg;
    box-shadow: 0 0 0 1px $base-border-color inset;

    &[data-active="true"] {
      background-color: $base-component-bg;
      box-shadow:
        0 -1px 0 0 $base-component-bg inset,
        0 -3px 0 0 var(--primary, $primary),
        0 0 0 1px var(--primary, $primary) inset;

      @at-root .ui-menu>& {
        box-shadow:
          0 -3px 0 0 var(--primary, $primary) inset,
          0 3px 0 0 var(--primary, $primary) inset,
          0 -1px 0 0 $base-component-bg inset,
          0 0 0 1px $base-border-color inset;
      }
    }

    &[data-disabled="true"] {
      color: rgba($base-muted, 0.5);

      &::before {
        background-color: rgba($gray, 0.25);
      }
    }
  }

  &__body {
    background-color: $base-component-bg;
    border: 1px solid $base-border-color;

    >.ui-section,
    >.ui-section__content,
    >.ui-router-view {
      background-color: $base-component-bg;
    }
  }
}

.ui-alert {
  &__wrapper {
    background-color: $base-color;
    box-shadow: $shadow-level2;
    color: $base-bg;
  }

  &.ui-toast {
    .ui-alert__wrapper {
      background-color: $base-theme;
      box-shadow: $shadow-level3;
      color: $base-color;
    }

    .ui-alert__icon {
      background-color: $base-color;
      color: $white;
    }
  }

  @mixin make-alert($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      .ui-alert__wrapper {
        background-color: $theme-color;
        color: $white;
      }

      &.ui-toast .ui-alert__wrapper {
        background-color: $base-theme;
        color: $theme-color;

        .ui-alert__icon {
          background-color: $theme-color;
          color: $white;
        }
      }
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-alert($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-alert($label, $color);
  }
}

.ui-dialog {
  box-shadow: $shadow-level4;

  .ui-panel__header {
    background-color: var(--dlg-header-active-bg, $dlg-header-active-bg);
    color: $dlg-header-active-color;
    font-weight: $font-weight-medium;

    &__actions {
      .ui-dlg--tool {
        .ui-btn {
          .ui-icon {
            background-color: $white;
            border: 0.05em solid $gray;
          }

          &:hover .ui-icon {
            background-color: $gray-light;
          }
        }

        &[data-disabled="true"] {
          .ui-icon {
            color: $dlg-header-inactive-color;
          }
        }
      }
    }
  }

  &__wrapper {
    &[data-modal="true"] {
      background-color: rgba(0, 0, 0, 0.05);
    }

    &[data-active="false"] .ui-dialog {
      box-shadow: $shadow-level2;

      .ui-panel__header {
        background-color: $dlg-header-inactive-bg;
        color: $dlg-header-inactive-color;

        .ui-dlg--tool:not(:hover) {
          background-color: transparent;

          .ui-icon {
            color: $dlg-header-inactive-color;
          }
        }
      }
    }
  }
}

.ui-drawer {
  &__body {
    background-color: $sidebar-bg;
  }

  &__shim {
    background-color: transparent;
  }

  $base: unquote(".ui-drawer");

  &[data-align="start"] &__body {
    @extend .ui-border--e;
  }

  &[data-align="end"] &__body {
    @extend .ui-border--s;
  }

  &__toggler {
    color: var(--primary, $primary);
  }

  &[data-peek="true"] {
    #{$base}__shim {
      background-color: $sidebar-shim;
    }
  }
}

.ui-sidebar {
  background-color: $sidebar-bg;

  &__titlebar {
    &::after {
      @extend %hr;
      border-bottom-style: none;
    }
  }

  &__body {
    background-color: $base-theme;
  }

  $base: unquote(".ui-sidebar");

  &[data-position="start"] {
    @extend .ui-border--e;
  }

  &[data-position="end"] {
    @extend .ui-border--s;
  }

  &__toggler {
    &:hover {
      color: var(--primary, $primary);
    }
  }

  &__resizer {
    background-color: var(--sidebar-resizer, $sidebar-resizer);
    box-shadow: $shadow-level2;

    &[data-resizing="true"] {
      border-left: 2px dotted rgba($base-invert, 0.25);
    }
  }

  &[data-collapsed="true"] {
    #{$base}__body {
      @extend .ui-border--e;
    }

    &[data-position="end"] {
      #{$base}__body {
        @extend .ui-border--s;
      }
    }

    &[data-peek="true"] {
      #{$base}__body {
        box-shadow: 0 0 20px 0 $base-shadow-color;
      }
    }
  }

  &__selected {
    color: var(--primary, $primary);
    font-weight: bold;
  }
}

.ui-page .ui-sidebar {
  box-shadow: none;
}

.ui-toolbar {

  &,
  &>.ui-container {
    >.ui-field {
      &:not(:focus-within) {

        &,
        .ui-field__wrapper,
        .ui-input {
          background: none;
          box-shadow: 0 -1px 0 0 $base-border-color inset;
        }
      }
    }

    >.ui-divider {
      @extend %vr;
    }
  }

  &>.ui-container {
    background-color: $toolbar-bg;
  }

  @mixin make-toolbar-variable($theme, $theme-color, $fallback-color) {
    &.ui-theme--#{$theme} {
      background-color: var(--#{$theme}-base-theme-10, mix($fallback-color, $base-theme, 10%));
    }
  }

  @mixin make-toolbar($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      background-color: mix($theme-color, $base-theme, 10%);
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-toolbar-variable($label, $color, $fallback-color);
  }

  @each $label, $color, $fallback-color in $base-colors {
    @include make-toolbar($label, $color);
  }
}

.ui-accordeon {
  &.ui-accordeon-horizontal {
    background-color: $white;

    >.ui-accordeon-item {
      >.ui-accordeon-item__header {
        border: none;
        border-right: solid 1px $black-10;

        >.ui-header__title {
          color: var(--primary, $primary);
        }

        .ui-accordeon-item__header__counter {
          background-color: var(--primary-10, rgba($primary, 0.1));
          color: $primary;
        }
      }

      >.ui-accordeon-item__body {
        border: none;
      }
    }
  }

  $base: unquote(".ui-accordeon-item");

  .ui-accordeon-item {
    &__header {
      border: solid 0.1px #cccccc;
      background-color: $white;
      color: $black;
      transition: border 0.3s;
      margin-top: 0;
      padding-block: 5px;
      padding-right: 5px;

      &__right {
        column-gap: 0.3rem;
      }

      &.expanded {
        border: solid 0.5px var(--divider-bg, $divider-bg);
        transition: border 0.3s;

        .ui-header__icon>.ui-icon {
          color: var(--primary, $primary);
        }
      }

      &__counter {
        &.zero {
          background-color: $gray;
        }

        background-color: var(--primary, $primary);
        color: $white;
        margin-left: 1rem;
        border-radius: 50%;
        font-weight: bold;
      }
    }

    &__body {
      &>*[slot="ui-accordeon-item__body"] {
        padding: 1rem;
      }

      background-color: $white;
      opacity: 1;
      border: solid 0.5px var(--divider-bg, $divider-bg);
      border-top: none;
      transition: max-height 0.3s,
      padding 0.3s,
      opacity 0.3s;

      &.aurelia-hide {
        opacity: 0;
        transition:
          max-height 0.3s,
          opacity 0.3s,
          padding 0.3s;
        margin-bottom: 0;
        padding: 0;
      }
    }
  }
}

ui-panel.ui-table-panel {
  overflow: visible;

  .ui-panel__body {
    overflow: initial;

    ui-table .ui-table__cell {
      overflow: visible;

      &:not(:has(.ui-input--invalid)) {
        overflow: hidden;
      }

      >div {
        overflow: inherit;
      }
    }
  }
}

ui-accordeon.ui-accordeon>.ui-accordeon-item>.ui-accordeon-item__body {
  ui-table .ui-table__cell {
    overflow: visible;

    &:not(:has(.ui-input--invalid)) {
      overflow: hidden;
    }

    >div {
      overflow: inherit;
    }
  }
}