.navds-guide-panel {
  --__axc-guide-panel-guide-size: 3.75rem;

  position: relative;
  display: flex;
  width: fit-content;

  &[data-poster="true"],
  &[data-responsive="true"] {
    flex-direction: column;
    align-items: center;
  }

  &[data-poster="false"] {
    flex-direction: row;
    align-items: flex-start;
  }

  @media (min-width: 480px) {
    & {
      --__axc-guide-panel-guide-size: 5rem;
    }

    &[data-responsive="true"] {
      flex-direction: row;
      align-items: flex-start;
    }
  }
}

.navds-guide {
  box-sizing: border-box;
  border: 2px solid var(--ax-border-info);
  border-radius: var(--ax-border-radius-full);
  overflow: hidden;
  width: var(--__axc-guide-panel-guide-size);
  height: var(--__axc-guide-panel-guide-size);
  flex-shrink: 0;
}

.navds-guide svg,
.navds-guide img {
  height: 100%;
  width: 100%;
}

.navds-guide-panel__content {
  background-color: var(--ax-bg-raised);
  border: 2px solid var(--ax-border-info);
  border-radius: var(--ax-border-radius-xlarge);
  position: relative;

  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
    margin-top: var(--ax-spacing-5);
  }

  .navds-guide-panel[data-poster="false"] > & {
    margin-left: var(--ax-spacing-5);
  }

  @media (min-width: 480px) {
    .navds-guide-panel[data-responsive="true"] > & {
      margin-top: 0;
      margin-left: var(--ax-spacing-5);
    }
  }
}

.navds-guide-panel__content-inner {
  padding: var(--ax-spacing-3) var(--ax-spacing-4);
  border-radius: var(--ax-border-radius-xlarge);
  background-color: var(--ax-bg-raised);
  position: relative;
  height: 100%;

  .navds-guide-panel[data-poster="false"] & {
    min-height: var(--__axc-guide-panel-guide-size);
  }

  @media (min-width: 480px) {
    & {
      padding: var(--ax-spacing-4) var(--ax-spacing-5);
    }

    .navds-guide-panel[data-responsive="true"] & {
      min-height: var(--__axc-guide-panel-guide-size);
    }
  }
}

.navds-guide-panel__tail {
  position: absolute;
  z-index: 0;

  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
    left: 50%;
    top: calc(var(--ax-spacing-4) * -1 - 2px);
    transform: translateX(-48%);
  }

  .navds-guide-panel[data-poster="false"] & {
    top: calc(var(--__axc-guide-panel-guide-size) / 2);
    left: calc(var(--ax-spacing-5) * -1 - 2px);
    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
  }

  @media (min-width: 480px) {
    .navds-guide-panel[data-responsive="true"] & {
      top: calc(var(--__axc-guide-panel-guide-size) / 2);
      left: calc(var(--ax-spacing-5) * -1 - 2px);
      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
    }
  }
}
