/////////////////////////////////////////////////
// THEME / COMPONENTS / IDM (IDENTITY MANAGEMENT)
/////////////////////////////////////////////////


@use "../variables/" as var;
@use "../mixins/" as mixins;


@layer components {

  .unl dialog#dcf-idm-dialog {
    width: 100%;
    max-width: 100%;
    height: fit-content;
    max-height: 100%;
  }


  .unl dialog#dcf-idm-dialog::backdrop {
    backdrop-filter: blur(3px);
    background-color: var(--bg-overlay-light);
  }


  .unl-idm-status-quasi img{
    filter: blur(3px);
  }


  .unl-idm-services {
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) var(--mask-height),
      rgba(0, 0, 0, 1) calc(100% - var(--mask-height)),
      rgba(0, 0, 0, 0));
    padding-block: var(--mask-height);
  }


  .unl-icon-card {
    grid-template-columns: 1fr;
    grid-template-rows: calc(1.78em / 2) calc(1.78em / 2) 1fr;
  }


  .unl-icon-card-icon {
    grid-area: 1 / 1 / 3 / -1;
  }


  .unl-icon-card-body {
    --icon-size: 1.78em;
    --padding: 1em;
    --clip-block: calc(var(--icon-size) / 2);
    --clip-inline: calc(calc(var(--icon-size) / 2) + var(--padding));
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, calc(50% + var(--clip-inline)) 0, calc(50% + var(--clip-inline)) var(--clip-block), calc(50% - var(--clip-inline)) var(--clip-block), calc(50% - var(--clip-inline)) 0, 0 0);
    grid-area: 2 / 1 / -1 / -1;
  }


  .unl-idm-card-body {
    container-type: inline-size;
  }


  .unl-idm-card-list li {
    break-inside: avoid-column;
    margin-bottom: 0;
  }


  @container (min-width: #{var.$ms22}em) {

    .unl-idm-card-list {
      grid-auto-flow: column;
      grid-template-columns: 1fr 1fr;
    }


    .unl-idm-ms365-list {
      grid-template-rows: auto auto;
    }


    .unl-idm-other-services-list {
      grid-template-rows: auto auto auto auto auto;
    }

  }


  @include mixins.mq(md, max, width) {

    .unl .dcf-idm-dialog-backdrop {
      backdrop-filter: blur(3px);
      background-color: var(--bg-overlay-light);
      bottom: 0;
      height: 100vh;
      position: fixed;
      width: 100%;
      z-index: 998;
    }

    .dcf-nav-toggle-btn-chat {
      color: var.$cream !important;
      row-gap: .42em !important;
    }

    .dcf-nav-toggle-label-chat {
      font-weight: 600 !important;
      margin-top: 0 !important;
    }

    .unl-idm-content {
      bottom: 4.21em;
      grid-template-rows: 1fr auto;
      height: 56vh;
    }


    .unl-idm-personal {
      border-bottom: 1px solid rgba(0,0,0,.25); // Remove when IDM JS is working
      bottom: 4.21em;
      grid-row: 2 / 3;
      z-index: 9999;
    }


    .unl-idm-services {
      --mask-height: 1.78em;
      grid-row: 1 / 2;
    }

  }


  @include mixins.mq(md, min, width) {

    .unl .dcf-idm-img {
      color: var.$light-gray;
    }


    .unl .dcf-header-global-dialog .dcf-idm-img {
      color: var.$cream;
    }


    .unl .dcf-idm-dialog .dcf-btn-search-desktop {
      color: var.$cream;
    }


    .unl .dcf-idm-dialog .dcf-btn-search-desktop .dcf-btn-header-global-toggle-icon {
      color: var.$scarlet;
    }


    .unl-idm-content {
      grid-template-rows: auto 1fr;
      max-height: 84vh;
    }


    .unl-idm-services {
      --mask-height: 3.16em;
      border-top: 3px solid #d00000;
    }

  }


  @media only screen and (min-width: #{var.$ms31}em) {

    .unl-idm-grid-services {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    .unl-idm-ms365 {
      grid-column: 1 / span 1;
    }


    .unl-idm-canvas {
      grid-column: 2 / span 1;
      grid-row: 1 / 2;
    }


    .unl-idm-other-services {
      grid-column: 3 / span 2;
      grid-row-end: 2;
    }

  }

}