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

.modal--manage-profiles {
  .modal {
    &__body {
      @media screen and (min-width: variables.$bp-tablet-plus) {
        width: 100%;
        padding-right: 0;
        flex: none;
        margin-top: auto;
        margin-bottom: auto;
        justify-content: center;
      }

      & > div {
        width: 100%;
      }
    }
  }

  .button-add-profile {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 1.25rem 0.375rem;

    @media (pointer: fine) {
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.3s;
      }
    }

    span {
      @include mixins.heading-4;

      & {
        color: var(--uc-theme-color-90);
        margin-top: 0.75rem;
      }
    }
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.875rem;
    width: 100%;

    @media screen and (max-width: variables.$bp-phone) {
      gap: 0.5rem;
    }

    li {
      display: flex;
      flex: 0 0 calc(33.333333% - 1.25rem);
      max-width: calc(33.333333% - 1.25rem);
      justify-content: center;
      margin-bottom: 0.25rem;

      .avatar-element {
        width: 100%;

        .icon-container,
        .vue-load-image {
          @media screen and (max-width: variables.$bp-phone) {
            width: 3.75rem;
            height: 3.75rem;
          }
        }

        .icon-container {
          @media screen and (max-width: variables.$bp-phone) {
            font-size: 2rem;
          }
        }
      }

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

  &__description {
    @include mixins.body-small;
    color: var(--uc-text-text-secondary);
    text-align: center;
    margin-top: 2.5rem;
  }

  @media screen and (max-width: variables.$bp-laptop) {
    z-index: var(--uc-vselect-z-index);
  }
}

.modal--edit-profile {
  form,
  .modal__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.88rem;

    form {
      width: 100%;
    }

    .selected-icon--editable {
      background-color: var(--uc-bg-bg-surface-1);
      border-color: transparent;
    }
  }

  &__icon {
    position: relative;

    // Touch screens pin the icon's edit affordance to the top right corner,
    // where the active badge sits. Move it to the opposite corner, the side
    // the profile overview puts its edit button on.
    .selected-icon__edit {
      @media screen and (max-width: variables.$bp-tablet) {
        right: auto;
        left: -0.9375rem;
      }
    }

    body.touch-screen & .icon-container--huge--circle .selected-icon__edit {
      right: auto;
      left: -0.5rem;
    }
  }

  &__active {
    position: absolute;
    display: inline-flex;
    top: 0.25rem;
    right: 0.25rem;
    transform: translate(50%, 0);
    -webkit-transform: translate(50%, 0);
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1rem;
    color: var(--uc-background);
    background-color: var(--uc-success-success);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 2;

    @media screen and (max-width: variables.$bp-phone) {
      width: 1.25rem;
      height: 1.25rem;
      font-size: 0.75rem;
    }
  }

  &__delete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;

    .button--danger[disabled] {
      border-color: var(--uc-buttons-secondary-button-secondary-disabled-bg);
      color: var(--uc-buttons-secondary-button-secondary-disabled-text);
    }
  }

  &__delete-info {
    @include mixins.body-small;
    color: var(--uc-text-text-secondary);
    text-align: center;
  }

  @media screen and (max-width: variables.$bp-laptop) {
    z-index: var(--uc-vselect-z-index);
  }
}