styles.scss

@use '~@zero-tech/zui/styles/theme' as theme;
@import '../../glass';

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.edit-profile {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  flex-grow: 1;
  max-width: 100%;

  &__header-container {
    display: flex;
    padding: 16px;
  }

  &__content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  &__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 16px;
  }

  &__body-input {
    width: 100%;
    gap: 4px;
    line-height: normal;
  }

  &__select-input {
    > *:last-child {
      > div {
        min-width: 236px;
      }
    }
  }

  &__image-upload {
    animation: fadeIn 2s;
  }

  &__zid-select-menu {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;

    width: 222px;
  }

  &__zid-menu-item-option {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    line-height: 24px;
    width: 100%;

    @include glass-text-primary-color;
  }

  &__zid-menu-item-option-label {
    flex-grow: 1;
  }

  &__zid-menu-item-option-icon {
    flex-grow: 0;
  }

  &__zid-menu-item-option-loading-spinner {
    width: 24px;
    height: 22px;
  }

  &__primary-zid-lable {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  &__info-tooltip:hover {
    cursor: pointer;
  }

  &__footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  &__alert-small {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 8px 4px 8px;
  }

  &__alert-text {
    font-size: 14px;
    line-height: 20px;
  }
}