// vf-profile

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-profile.variables.scss';

.vf-profile {
  align-items: center;
  color: color(grey--darkest);
  display: flex;
  flex-direction: column;
  width: 100%; // we might not need this
}

.vf-profile__image {
  border: 1px solid color(grey--lightest);
  border-radius: 50%;
  box-sizing: border-box;
  max-height: var(--vf-profile-avatar--size, 160px);
  max-width: var(--vf-profile-avatar--size, 160px);
  object-fit: cover;
  width: 100%;
}

.vf-profile__title {
  @include set-type(text-heading--3, $custom-margin-bottom: 0);
}

.vf-profile__job-title {
  @include set-type(text-heading--4, $custom-margin-bottom: .25rem);
}

.vf-profile__text {
  @include set-type(text-body--2, $custom-margin-bottom: 0);
  line-height: 1.2;

  .vf-profile__job-title + & {
    margin-bottom: .25rem;
  }
}

.vf-profile__email {
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  line-height: 1.2;
  margin-bottom: space(200);
  word-break: break-all;
}

.vf-profile__phone {
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  line-height: 1.2;
  word-break: break-all;
}

.vf-profile__uuid {
  @include set-type(text-body--4, $custom-margin-bottom: 0);

  line-height: 1;
  margin-top: space(200);
  word-break: break-all;
}

.vf-profile__link {
  @include inline-link();
}

// Layout
.vf-profile--inline {
  @media (min-width: $vf-breakpoint--xs) {
    display: grid;
    grid-column-gap: 1.5rem;
    grid-template-columns: var(--vf-profile-avatar--size, 160px) 1fr;

    & > * {
      grid-column: 2 / span 1;
    }

    .vf-profile__image {
      align-self: start;
      grid-column: 1 / span 1;
      grid-row: 1 / 100;
    }
  }
}

// Sizes
.vf-profile--small {
  --vf-profile-avatar--size: 64px;

  grid-column-gap: .5rem;

  .vf-profile__title {
    @include set-type(text-heading--5, $custom-margin-bottom: 0);
  }


  .vf-profile__job-title {
    @include set-type(text-heading--5, $custom-margin-bottom: .25rem);
  }

  .vf-profile__email.vf-u-last-item {
    margin-bottom: 0;
  }
}

.vf-profile--medium {
  --vf-profile-avatar--size: 96px;

  grid-column-gap: 1rem;

  .vf-profile__title {
    @include set-type(text-heading--4, $custom-margin-bottom: 0);
  }

  .vf-profile__job-title {
    @include set-type(text-heading--4, $custom-margin-bottom: .25rem);
  }
}

.vf-profile--large {
  --vf-profile-avatar--size: 160px;
}

html:not(.vf-disable-deprecated) {
  // variants
  .vf-profile--easy {
    @warn 'This variant has been deprecated';
    border-bottom: 8px solid var(--vf-profile__border--color);
    padding-bottom: 8px;
  }


  // themes
  .vf-profile-theme--primary {
    @warn 'This variant has been deprecated';
    --vf-profile__border--color: #{color(blue)};

    .vf-profile__title {
      color: color(blue);
    }
  }

  .vf-profile-theme--secondary {
    @warn 'This variant has been deprecated';
    --vf-profile__border--color: #{color(green)};

    .vf-profile__title {
      color: color(green);
    }
  }
}