@use "../base/mixins";
@use "../vars/variables";

.list-application-credentials {
  width: 100%;

  .td-client-id {
    max-width: 10rem;

    @media screen and (min-width: variables.$bp-phone-plus) {
      @include mixins.body-extrasmall;
    }

    @media screen and (max-width: variables.$bp-phone) {
      max-width: 100%;
    }

    .td-item {
      width: 100%;
      min-width: 0;
      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;

      @media screen and (max-width: variables.$bp-phone) {
        text-align: right;
      }
    }

    .td-content {
      width: 100%;

      @media screen and (max-width: variables.$bp-phone) {
        max-width: 50vw;
      }
    }
  }

  th.list-application-credentials__th {
    &--integration {
      @media screen and (min-width: variables.$bp-phone-plus) {
        padding-left: 2.25rem;
      }
    }

    &--name {
      @media screen and (min-width: variables.$bp-phone-plus) {
        width: 100%;
        max-width: 35%;
      }
    }
  }

  &__item {
    &__icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.875rem;
      width: 1.75rem;
      height: 1.75rem;

      img {
        object-fit: cover;
      }
    }
  }
}

.modal--add-application-credential {
  .modal {
    &__body {
      display: flex;
      flex-direction: column;
      gap: 1.875rem;
      max-width: 31.75rem;
      padding-top: 3.75rem;
      margin-left: auto;
      margin-right: auto;

      & > p {
        @include mixins.body-large;
        color: var(--uc-theme-color-80);

        & > a {
          color: var(--uc-theme-color-80);
          text-decoration: underline;

          &:hover {
            text-decoration: none;
          }
        }
      }

      .select-extra {
        .v-select {
          min-width: min-content;
          max-width: 60%;
          min-width: 50%;
        }
      }
    }
  }
}