/* Structure only. Visual properties are injected from the shared homepage owner. */
.home-account-controls,
.home-gpx-control {
  position: relative;
  width: fit-content;
  color: var(--home-control-foreground);
  font-family: var(--home-control-font-family);
  font-size: var(--home-control-font-size);
  line-height: var(--home-control-line-height);
}

.home-icon-button {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--home-control-size);
  height: var(--home-control-size);
  padding: 0;
  border: 0;
  border-radius: var(--home-control-radius);
  background: var(--home-control-background);
  color: var(--home-control-foreground);
  cursor: pointer;
}

.home-control-icon {
  display: block;
  flex: none;
  width: var(--home-control-icon-size);
  height: var(--home-control-icon-size);
  background: currentColor;
  -webkit-mask: var(--home-icon-source) center / contain no-repeat;
  mask: var(--home-icon-source) center / contain no-repeat;
}

.home-account-disclosure {
  position: absolute;
  inset-inline-end: calc(100% + var(--home-account-menu-gap));
  inset-block-start: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: var(--home-account-menu-width);
  padding: var(--home-account-menu-padding);
  border-radius: var(--home-account-menu-radius);
  background: var(--home-account-menu-background);
}

.home-account-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--home-account-item-gap);
  align-items: center;
}

.home-account-action,
.home-apple-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.home-account-action {
  min-width: var(--home-account-item-height);
  min-height: var(--home-account-item-height);
  gap: var(--home-account-item-gap);
}

.home-account-action[data-home-action="account"] {
  text-decoration: underline;
}

.home-apple-button,
.home-apple-button img {
  width: var(--home-apple-width);
  height: var(--home-apple-height);
}

.home-apple-button {
  border-radius: var(--home-apple-radius);
  overflow: hidden;
}

.home-apple-button img {
  display: block;
  object-fit: contain;
}

.home-account-controls > .home-icon-button,
.home-account-controls .home-apple-button {
  transform-origin: center;
  transition: transform var(--home-account-shrink-duration) var(--home-account-shrink-easing),
    opacity var(--home-account-shrink-duration) var(--home-account-shrink-easing),
    visibility 0s;
}

.home-account-controls[data-panel-open="true"] > .home-icon-button,
.home-account-controls[data-panel-open="true"] .home-apple-button {
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s, var(--home-account-shrink-duration);
}

@media (prefers-reduced-motion: reduce) {
  .home-account-controls > .home-icon-button,
  .home-account-controls .home-apple-button { transition: none; }
}

.home-control-status {
  margin: 0;
  font: inherit;
}

.home-account-disclosure > .home-control-status {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--home-account-menu-gap));
  width: var(--home-account-menu-width);
}

.home-legal-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--home-footer-gap);
  color: var(--home-footer-color);
  font-family: var(--home-footer-font-family);
  font-size: var(--home-footer-font-size);
  line-height: var(--home-footer-line-height);
}

.home-legal-footer nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--home-footer-link-font-size);
  gap: var(--home-footer-gap);
}

.home-legal-link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--home-footer-gap);
}

.home-legal-footer a {
  color: inherit;
  text-decoration: none;
}

.home-icon-button:disabled,
.home-account-action:disabled,
.home-apple-button:disabled {
  cursor: wait;
}

.home-account-disclosure[hidden],
.home-control-status[hidden],
.home-apple-button [hidden] {
  display: none;
}