@use "../util";
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";
@use "../base/mixins";

/**
 * Styles for OAuth management form.
 */

ul.client-list {
  padding-left: 1.5em;

  li.client {
    list-style-type: none;
    margin-bottom: 1.5em;

    span.client-name::before {
      margin-left: -1.5em;
    }

    p.client-desc, p.client-url {
      font-weight: normal;
      font-size: 80%;
      margin-top: .2em;
      margin-bottom: .2em;
    }
  }

  br {
      display: block;
      margin: 3pt 0;
  }
}

span.client-name {
  font-weight: bold;

  &::before {
    @include mixins.icon-font;
    display:   inline-block;
    width:     1.5em;
    content:   icons.$fa-client;
    color:     colors.$ids-blue-1;
    font-size: 100%;
  }
}

.client-type-confidential::after {
  @include mixins.icon-font;
  margin-left: .3em;
  display:   inline-block;
  width:     1.5em;
  font-size: 70%;
  // line-height: top;
  vertical-align: text-top;
}

.client-type-confidential::after {
  content:   icons.$fa-confidential;
  color:     colors.$ids-blue-1;
}

#client_source {
  white-space: pre;
  border-radius: lengths.$standard-border-radius;
  border-color:     colors.$ids-grey-2;
  border-style:     solid;
  background-color: colors.$light-orange;
}

li.token {
    list-style-type: none;
}


label[for=token] {
    font-weight: bold;

  &::before {
    @include mixins.icon-font;
    font-feature-settings: "ss01" on;
    margin-left: -1.5em;
    display:   inline-block;
    width:     1.5em;
    content:   icons.$fa-token;
    color:     colors.$ids-blue-1 !important;
    font-size: 100%;
    font-weight: 900;
  }
}
