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


.unl .dcf-idm-options {
  width: #{ms(14)}em;
}


@include mq(md, max, width) {

  .unl .dcf-idm-login {
    flex-direction: column;
  }

  .unl .dcf-idm-options {
    left: 50%;
    top: -2px;
    transform: translate(-50%, -100%);
  }

  .unl .dcf-idm-toggle {
    display: none;
  }

  .unl .dcf-idm-label {
    @include mt-1;
  }

}


@include mq(md, min, width) {

  .unl .dcf-idm-toggle {
    display: flex;
  }

  .unl .dcf-idm-login {
    flex-direction: row-reverse;
  }

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

  .unl .dcf-idm-label {
    @include mr-3;
  }

  .unl .dcf-idm-options {
    @include mt-2;
    right: 0;
    top: 100%;
  }

  // Add arrow above options popover and horizontally center under button text
  .unl .dcf-idm-login[aria-expanded="true"] ~ .dcf-idm-options::before {
    border-left: #{ms(-4)}em solid transparent;
    border-right: #{ms(-4)}em solid transparent;
    border-bottom: #{ms(-4)}em solid rgba(36,36,35,.95);
    top: -#{ms(-4)}em;
    content: '';
    display: block;
    @include h-2;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    @include w-2;
  }

  .unl .dcf-idm-options li:last-child {
    margin-bottom: 0;
  }

}