@import "../../mixins/_shadows-helper.less";
@import "../../mixins/_vendor-prefixes.less";


/**
 * c8y user roles - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.user-dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 30px;
  margin-right: @size-10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--brand-10, var(--c8y-brand-10));
  vertical-align: middle;
  text-align: center;
  text-transform: capitalize;
  font-size: @size-16;
  line-height: 1;
  background-color: var(--brand-60, var(--c8y-brand-60));
  .owned &,
  .list-group-item & {
    width: 30px;
    height: 30px;
    font-size: @size-16;
    line-height: @size-32;
  }
  &.user-disabled {
    background-color: @gray-80;
  }
}

.user-list-row {
  display: flex;
  flex-flow: row wrap;
  margin-top: calc(@size-base * 2);
  padding: @size-16;
  border-radius: @component-border-radius-base;
  background-color: @component-background-default;

  .boxShadowHelper(sm);
  @media (max-width: @screen-sm-max) {
    box-shadow: var(--c8y-elevation-sm);
  }
  &:first-child {
    margin-top: 0;
  }
  .col-actions .c8y-dropdown {
    color: @component-color-actions;
    opacity: @component-actions-opacity;
    &:hover,
    .open.dropdown & {
      opacity: 1;
    }
  }
  &.user-list-header {
    display: none;
    padding: 0;
    min-height: @size-24;
    background-color: transparent;
  }
  .col-expand {
    order: 100;
    width: 30px;
    @media (max-width: @screen-sm-max) {
      width: 100% !important;
      text-align: center;
    }
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      .transition(transform 0.25s ease); //float: right;
      &.open {
        color: var(--brand-primary, var(--c8y-brand-primary));

        .rotate(180deg);
      }
    }
  }
  .col-subaccounts {
    display: none;
  }
  .col-selector {
    display: none;
    font-size: @size-20;
  }
  .col-globalroles {
    order: 10;
    margin: @size-base 0;
    padding: @size-4 0;
    width: 100%;
    .c8y-child-assets-selector .dropdown-menu.multiselect-container {
      max-width: 100%;
      width: 100%;
    }
  }
  .col-passwordstrength,
  .col-twofactorauth {
    display: none;
  }
  .col-username {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    order: 1;
    margin-bottom: @size-10;
    @media (max-width: @screen-md-min) {
      width: calc(~'100% - 24px') !important;
    }
    .h4 {
      margin: 0;
    }
  }
  .col-actions {
    order: 2;
    margin: calc(@size-16 * -1) calc(@size-16 * -1) 0 0;
    margin-left: auto;
  }
  .col-fullname {
    order: 4;
  }
  &.owned {
    margin-top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .disabled {
    padding-right: @size-5;
    color: @state-danger-text;
    font-style: italic;
  }
}

@media (min-width: @screen-md-min) {
  .user-list-row.user-list-header {
    display: flex;
    padding-right: @size-40;
    box-shadow: none;
  }
  .user-list-row {
    position: relative;
    align-items: center;
    flex-flow: row wrap;
    margin-top: @size-base;
    padding: 6px @size-40 @size-10 0;
    min-height: calc(@size-base * 7);
    &.page-sticky-header {
      padding-top: 0;
      padding-bottom: 0;
      min-height: calc(@size-base * 6);
    }

    .col-expand {
      order: 0;
      text-align: center;
      [class^='dlt-c8y-icon-'],
      [class*=' dlt-c8y-icon-'] {
        .rotate(-90deg);
        &.open {
          .rotate(0deg);
        }
      }
    }
    .col-selector {
      display: block;
      flex: 0 0 50px;
    }
    .col-username {
      flex: 0 0 auto;
      margin: 0;
      padding-right: @size-10;
      width: 250px;
      .h4 {
        font-size: 100%;
      }
    }
    .col-subaccounts {
      display: block;
      flex: 0 0 30px;
      order: 2;
    }
    .col-fullname {
      flex: 0 0 auto;
      order: 5;
      margin: 0;
      padding-right: @size-10;
      width: 230px;
    }
    .col-globalroles {
      flex: 0 0 240px;
      order: 7;
      margin: 0;
      padding: 0;
      max-width: 240px;
      border: 0;
      .c8y-child-assets-selector {
        display: block;
      }
    }
    .col-passwordstrength {
      display: block;
      flex: 0 0 72px;
      order: 10;
      margin-left: auto;
    }
    .col-twofactorauth {
      display: block;
      flex: 0 0 20px;
      order: 10;
    }
    .col-actions {
      position: absolute;
      top: @size-4;
      right: 0;
      flex: 0 0 40px;
      order: 100;
      margin: 0 0 0 auto;
      width: @size-40;
    }
    &.owns {
      margin-bottom: calc(@size-base * 2);
      .tip {
        position: relative;
        flex: 0 0 100%;
        order: 900;
        height: 0;
      }
      .tip:not(.expanded):after {
        position: absolute;
        top: 5px;
        right: -35px;
        left: 5px;
        z-index: -1;
        height: @size-10;
        background-color: @component-background-default;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
        content: '';
      }
      + .owned {
        margin-top: calc(@size-base * -2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
    &.owned {
      margin-top: 1px;
    }
  }
}

.list-group-item.user {
  .col-expand {
    display: inline-block;
    padding-right: @size-5;
    width: @size-20;
    text-align: center;
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      .rotate(-90deg);
      &.open {
        color: var(--brand-primary, var(--c8y-brand-primary));

        .rotate(0deg);
      }
    }
  }
  .selection-icon {
    display: none;
    margin-left: auto;
    font-size: @size-20;
  }
  input[type='checkbox'] {
    width: 0;
    opacity: 0;
  }
  input[type='checkbox']:checked ~ .selection-icon {
    display: block;
  }
  &.selected {
    background-color: var(--palette-status-success, var(--c8y-palette-status-success))!important;
    color: @component-background-default;
    .col-expand,
    .col-expand .open[class^='dlt-c8y-icon-'],
    .col-expand .open[class*=' dlt-c8y-icon-'] {
      color: @component-background-default;
    }

    .text-muted {
      color: rgba(@component-background-default, 0.5);
    }
    .user-dot:not(.user-disabled) {
      background-color: @component-background-default;
      color: var(--brand-primary, var(--c8y-brand-primary));
    }
  }
}

.item-list-row,
.list-group-item.item-list-row {
  display: flex;
  align-items: center;
  &:first-child {
    border-top: 0;
  }
  c8y-app-icon {
    font-size: 30px;
    line-height: 30px;
    .app-noicon {
      margin-bottom: -7px;
      width: 30px;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
    }
  }
  > label:not(.c8y-checkbox) {
    flex: 1 1 100%;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 100%;
    line-height: 1;
    cursor: pointer;

    overflow-wrap: break-word;
  }
}

.user-picker-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  max-height: 190px;

  .list-group {
    margin-bottom: 0;
  }
}