.ui-table {
  td > a {
    display: inline-block;
    width: 100%;
    &:hover {
      text-decoration: underline;
    }
  }
}
@media screen and (min-width: ($breakpoints-md + 1)) {
  .ui-table {
    $base: unquote(".ui-table");

    &__header__cell,
    &__header__cell__checkable,
    &__header__cell__counter,
    &__header__cell__drang-and-drop {
      border-color: $datagrid-row-border-color;
      color: $datagrid-head-color;
      background-color: $white;
      @include property-prefix(border-bottom, 1px solid $base-border-color);
    }

    &__header {
      &__cell {
        &__checkable,
        &__drang-and-drop,
        &__counter {
          color: var(--primary, $primary) !important;
        }

        > div > div {
          color: var(--primary, $primary);
        }
      }
    }

    &__cell {
      @include property-prefix(border-bottom, 1px solid $base-border-color);

      &__resizer {
        @include property-prefix(border-start, 1px solid $base-border-color);
      }

      &__sorter {
        ui-icon {
          border-color: $datagrid-head-color transparent;
        }
      }

      &[data-resizing="true"] {
        @include property-prefix(border-end, 2px solid $base-border-color);
      }
    }
  }
}

@media screen and (max-width: $breakpoints-md) {
  .ui-table {
    $base: unquote(".ui-table");

    &__row {
      @include property-prefix(border, 1px solid var(--primary, $primary));
    }

    &__container {
      @include property-prefix(border-end, 1px solid $base-border-color);
      @include property-prefix(border-bottom, 1px solid $base-border-color);
    }

    &__header {
      border-color: $datagrid-row-border-color;
      background-color: $datagrid-head-bg;
      color: $datagrid-head-color;
    }
  }
}

.ui-tree {
  &__search {
    .ui-input {
      box-shadow: none;
    }
  }

  &__expander {
    &:hover:not(.disabled) {
      color: $tree-active-bg;
    }
  }

  &__checkbox {
    &:hover {
      color: $tree-active-bg;
    }
  }

  &__label {
    &.ui-tree__selectable:hover {
      background-color: var(--tree-hover-bg, $tree-hover-bg);
      color: $tree-hover-color;
    }
  }

  &__show-more {
    color: var(--secondary, $secondary);
  }

  &__no-children {
    color: $base-muted;
  }

  &__selected .ui-tree__label {
    background-color: $tree-active-bg;
    color: $tree-active-color;
  }
}

.ui-datalist {
  &__card {
    box-shadow: $shadow-level0;

    .ui-card__content {
      &::before {
        @extend %hr;
      }
    }

    &[href] {
      &:hover {
        box-shadow: $shadow-level2;
      }
    }
  }

  &__table {
    data {
      display: block;

      &::before {
        color: $base-muted;
      }
    }
  }

  &__toolbox {
    .ui-btn__group {
      box-shadow: 0 0 1px 0 $base-shadow-color;
    }
  }
}

ui-entity-history {
  --base-line-height: #{$base-line-height};
  --ui-entity-history-fontsize: #{$ui-entity-history-fontsize};

  background-color: $black-3;

  .history_container {
    .ui-dropdown__icon {
      color: var(--primary, $primary);
    }

    &__old,
    &__new {
      max-height: calc(var(--base-line-height) * var(--ui-entity-history-fontsize) * 2);
    }
  }

  .value_overflow_hidden {
    max-height: calc(var(--base-line-height) * var(--ui-entity-history-fontsize) * 2);
  }

  .body__historique--timeline::before,
  .body__historique--box::before {
    background-color: var(--primary, $primary);
  }

  .body__historique--timeline-round::before {
    background-color: $white;
  }

  .body__historique--timeline-round::before,
  .body__historique--title-2::before {
    border: 2px solid var(--primary, $primary);
  }

  .body__historique--title {
    &-icon {
      background-color: $white;
      color: var(--primary, $primary);
    }
    &--creation {
      // color: green;
      color: #2bb732;
      font-weight: bold;
    }
    &--update {
      color: blue;
      font-weight: bold;
    }
    &--delete {
      color: red;
      font-weight: bold;
    }
  }

  .body__historique--box {
    > p {
      color: #505050;
    }
  }

  .body__historique--box-el {
    border-color: #d8d8d8;
  }

  .comment_detail + p,
  .comment_detail + p + p,
  .history_container__old + p,
  .history_container__old + p + p,
  .history_container__new + p,
  .history_container__new + p + p,
  .history_container_picture + p,
  .history_container_picture + p + p {
    color: var(--primary, $primary);
  }

  .history_filter_by {
    > div {
      border-color: var(--primary, $primary);
    }
  }
}

ui-chat {
  .container {
    &_discussion {
      border: $gray-10;
    }

    &_header_discussion {
      border-bottom: $gray-10;
    }
  }
  .name {
    color: var(--primary, $primary);
  }

  .name_user {
    color: var(--primary, $primary);
  }

  .message {
    background-color: $black-3;
    > span {
      color: var(--primary, $primary);
    }
  }

  .photo_user {
    border: solid 1px var(--primary, $primary);
  }

  .footer {
    &_discussion {
      border: $black-3;
      background-color: $white;
    }
  }
}

.container {
  &_notification {
    background-color: $white;
    .notification {
      &_text {
        a,
        a:hover {
          color: blue;
        }
      }
      &_subject {
        > span {
          color: var(--primary, $primary);
          font-weight: 700;
        }
        a,
        a:hover {
          color: blue;
        }
      }
    }

    .notification_text {
      max-height: 150px;
      text-overflow: ellipsis;
      overflow-y: hidden;
      white-space: pre-line;
      > span {
        color: var(--primary, $primary);
      }
    }

    .notification:hover {
      background-color: var(--primary-05, rgba($primary, 0.05));
    }

    .notification {
      border-top: 2px solid $gray-10;

      &_color {
        background-color: #ecf4ed;
      }
    }

    .contenu {
      border-top: 2px solid $gray-10;
      > span {
        color: var(--primary, $primary);
      }
    }

    &_header_title {
      .title {
        > div {
          color: #5d5d5d;
        }
      }
    }
  }
  &_text {
    > a,
    > a:hover {
      color: blue;
    }
  }
}

.container_alertes {
  .notification_subject {
    > span {
      color: var(--primary, $primary);
      font-weight: 700;
    }
    > a,
    > a:hover {
      color: blue;
    }
  }

  .alerte {
    background-color: $white;
    border: $black-35;
    box-shadow: $black-35;
  }
}
.ui-chat {
  &--input-text {
    border: 1px solid $gray-50;
    > span {
      color: var(--primary, $primary);
      font-weight: 700;
    }
  }
}
.tribute-container {
  box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, 0.5);
  border: 1px solid $gray-50;
}

.tribute-container::-webkit-scrollbar {
  background: $white;
}

.tribute-container ul {
  background: $white;
}

.tribute-container li {
  border-bottom: $gray-50 1px solid;
}

.tribute-container li.highlight {
  background: $gray-50;
}

.segmented-control {
  border: 1px $black-50 solid;

  &__input {
    &:checked + label {
      color: $white;
      transition: color 250ms ease-in-out;
    }
    &:disabled + label {
      color: $gray-50;
    }
  }
  &__label {
    color: $black-50;
  }

  .selector {
    background-color: var(--primary, $primary);
    transition: transform 0.25s ease-in-out;
  }
}

.chat_history_button {
  display: flex;
  justify-content: flex-end;
}
