/*
 * SPDX-FileCopyrightText: 2024 Kristóf Marussy
 *
 * SPDX-License-Identifier: MIT
 */

.contacts {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.col {
  margin-bottom: 1.5rem;
}

.contact {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
  --marussy-contact-color: var(--ifm-font-color-base);
  --marussy-contact-icon-color: var(--marussy-contact-color);
  --marussy-contact-icon-hover-color: var(--ifm-link-hover-color);
  --marussy-contact-muted-color: var(--ifm-color-secondary-contrast-foreground);
  --marussy-contact-muted-color-or-hover: var(--marussy-contact-muted-color);
  --marussy-alternate-icon: 0;
  color: var(--marussy-contact-color);
  transition: color var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

[data-theme='dark'] .contact {
  --marussy-contact-muted-color: var(--ifm-color-emphasis-500);
  --marussy-contact-icon-hover-color: var(--ifm-color-primary-light);
}

.contact:not(:has(.contact__action:hover)):hover,
.contact:focus-within:not(:has(.contact__action:focus)) {
  --marussy-contact-color: var(--ifm-link-hover-color);
  --marussy-contact-icon-color: var(--marussy-contact-icon-hover-color);
  --marussy-contact-muted-color-or-hover: var(--ifm-link-hover-color);
}

.contact:has(.contact__action--alternate:hover),
.contact:has(.contact__action--alternate:focus) {
  --marussy-alternate-icon: 1;
}

.contact__icon-holder {
  position: relative;
  display: flex;
  padding: 1rem;
  margin-right: 1rem;
  background: var(--ifm-color-emphasis-200);
  border-radius: 50em;
  align-items: center;
  justify-content: center;
  color: var(--marussy-contact-icon-color);
}

.contact__icon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: calc(1 - var(--marussy-alternate-icon));
  transition:
    color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
    opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

.contact__icon--fediverse {
  margin: -0.0625rem -0.0625rem 0.0625rem 0.0625rem;
}

.contact__icon--alternate {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--marussy-contact-icon-hover-color);
  opacity: var(--marussy-alternate-icon);
}

.contact__content {
  dispaly: flex;
  flex-direction: row;
}

.contact__title {
  margin: 0;
}

.contact__value {
  margin: 0;
}

.contact__description {
  margin: 0;
  font-style: italic;
  --slnt: -15;
  font-size: 0.875rem;
  --marussy-contact-color: var(--marussy-contact-muted-color-or-hover);
  color: var(--marussy-contact-muted-color-or-hover);
  transition: color var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.contact__link {
  --ifm-link-color: var(--marussy-contact-color);
}

.contact__link::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.contact__action {
  display: block;
  position: relative;
  --ifm-link-color: var(--marussy-contact-muted-color);
}

.contact__action:focus {
  --ifm-link-color: var(--ifm-link-hover-color);
}

.small {
  display: inline-block;
  position: relative;
  max-height: 0;
  width: 1.5rem;
  overflow: visible;
  vertical-align: text-bottom;
}

.small__link {
  display: flex;
  position: absolute;
  bottom: 0;
}

.small__icon {
  height: 2rem;
  width: 2rem;
  padding: 0.25rem;
  margin: -0.25rem;
}

.photo__container {
  position: relative;
  border-radius: var(--ifm-card-border-radius);
  overflow: hidden;
  aspect-ratio: 1288/480;
  min-height: 15rem;
  max-width: 100%;
  background-size: cover;
  background-position: 25% center;
}

.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  transform-origin: 25% center;
  transition: transform var(--ifm-transition-fast) ease;
}

.contacts:has(.contact--address:hover) .photo,
.contacts:has(.contact--address:focus-within) .photo {
  transform: scale(140%);
}

@media (prefers-reduced-motion: reduce) {
  .photo {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .contact__icon-holder {
    border: 2px solid ButtonBorder;
    background: ButtonFace;
    transition: none;
  }

  .contact__icon {
    color: ButtonText;
    transition: none;
  }

  .contact:not(:has(.contact__action:hover)):hover .contact__icon-holder,
  .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon-holder,
  .contact:has(.contact__action--alternate:hover) .contact__icon-holder,
  .contact:has(.contact__action--alternate:focus) .contact__icon-holder {
    background: Highlight;
  }

  .contact:not(:has(.contact__action:hover)):hover .contact__icon,
  .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon,
  .contact__icon--alternate {
    color: HighlightText;
  }

  .small__link:hover .small__icon,
  .small__link:focus .small__icon {
    background: Highlight;
    color: HighlightText;
  }
}