@import "./type-title.css";
@import "./badge.css";

.root-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid hsl(var(--blue) 10% 15% / 0.6);
  margin-top: 1rem;

  & .root-nav-entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    text-wrap: pretty;
    padding: 0.5rem 1rem;

    &:not(:last-child) {
      border-bottom: 1px solid hsl(var(--blue) 10% 15% / 0.6);
    }
  }
}

.types-nav {
  display: none;
}

#injectedMd {
  & > p:not(:first-child) {
    margin-block: 0.724rem;
  }
}

.type-module {
  color: hsl(var(--blue) 75% 60%);
}

.typedocs-subheading > span > p {
  margin: 0;
  margin-bottom: 1rem;
}

.typedocs-content {
  & > p {
    margin-block: 0.618rem;
  }

  & hr {
    margin-top: 0;
    margin-bottom: 0.318rem;
  }
}

.typedocs-data {
  & .typedocs-subheading {
    display: flex;
    flex-direction: column;
    gap: 0.618rem;
  }
}

.typedata {
  list-style: none;
  margin: 0;

  & .typedata-root {
    margin-bottom: 0.618rem;
    border-radius: 12px;
    padding: 0.8rem;
    transition: border 0.3s;
  }

  & .typedata-details {
    margin: 0;
  }

  & .typedata-params {
    & .typedata-param {
      margin-top: 0.272rem;
      display: flex;
      align-items: center;
      gap: 0.117rem;

      & svg {
        height: 1.272rem;
        width: 1.272rem;
        margin-right: 3px;
      }
    }
  }

  & .typedata-detailsdata,
  .typedocs-subheading {
    & > p {
      margin-top: 0.618rem;
    }

    & > p:last-child {
      margin-bottom: 0;
    }

    & .typeprop-link {
      color: hsl(var(--prop-link-color));

      & a {
        color: hsl(var(--prop-link-color));
      }
    }

    & .typesignal-link {
      color: hsl(var(--signal-link-color));

      & a {
        color: hsl(var(--signal-link-color));
      }
    }

    & .typefunc-link {
      color: hsl(var(--func-link-color));

      & a {
        color: hsl(var(--func-link-color));
      }
    }

    & .typevar-link {
      color: hsl(var(--var-link-color));

      & a {
        color: hsl(var(--var-link-color));
      }
    }
  }
}

.typedata-link {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;

  & svg {
    width: 18px;
    height: 18px;
    align-self: center;
  }
}

.typedata-param {
  color: hsl(var(--prop-link-color) / 1);
}

.type-datatype {
  color: #808080;
}

.type-generic {
  position: absolute;
  width: max-content;
  left: 0.845rem;
  top: 1.217rem;
}

.typeprops {
  & .typeprop-root {
    border: 1px solid hsl(var(--prop-color) / 0.6);

    &:hover {
      border: 1px solid hsl(var(--prop-color));

      & .type-datatype {
        opacity: 1;
      }
    }

    & .typeprop-name {
      color: hsl(var(--prop-link-color));
    }
  }
}

html.dark .typeprops {
  & .typeprop-root {
    border: 1px solid hsl(var(--prop-color) / 0.3);

    &:hover,
    &:target {
      border: 1px solid hsl(var(--prop-color) / 0.6);
    }
  }
}

.typefuncs {
  & .typefunc-root {
    border: 1px solid hsl(var(--func-color) / 0.6);

    &:hover {
      border: 1px solid hsl(var(--func-color));

      & .type-datatype {
        opacity: 1;
      }
    }

    & .typefunc-name {
      color: hsl(var(--func-link-color));
    }

    & .typefunc-params {
      & .typefunc-param {
        margin-top: 0.272rem;
        display: flex;
        align-items: center;
        gap: 0.117rem;

        & > svg {
          height: 1.272rem;
          width: 1.272rem;
        }
      }
    }
  }
}

html.dark .typefuncs {
  & .typefunc-root {
    border: 1px solid hsl(var(--func-color) / 0.3);

    &:hover,
    &:target {
      border: 1px solid hsl(var(--func-color) / 0.6);
    }
  }
}

.typesignals {
  & .typesignal-root {
    border: 1px solid hsl(var(--signal-color) / 0.6);

    &:hover {
      border: 1px solid hsl(var(--signal-color));

      & .typesignal-doclink {
        opacity: 1;
      }
    }

    & .typesignal-name {
      position: relative;
      width: max-content;
      color: hsl(var(--signal-link-color));

      & .typesignal-doclink {
        top: -12px;
        left: -6px;
        opacity: 0.8;
        scale: 75%;
      }
    }

    & .typesignal-params {
      & .typesignal-param {
        margin-top: 0.272rem;
        display: flex;
        align-items: center;
        gap: 0.117rem;

        & > svg {
          height: 1.272rem;
          width: 1.272rem;
        }
      }
    }
  }
}

html.dark .typesignals {
  & .typesignal-root {
    border: 1px solid hsl(var(--signal-color) / 0.3);

    &:hover,
    &:target {
      border: 1px solid hsl(var(--signal-color) / 0.6);
    }
  }
}

.typevariants {
  & .typevariant-root {
    border: 1px solid hsl(var(--var-color) / 0.6);

    &:hover {
      border: 1px solid hsl(var(--var-color));

      & .typevariant-doclink {
        opacity: 1;
      }
    }

    & .typevariant-name {
      position: relative;
      width: max-content;
      color: hsl(var(--var-link-color));

      & .typevariant-doclink {
        position: absolute;
        top: -12px;
        right: -12px;
        opacity: 0.8;
        scale: 75%;
      }
    }
  }
}

html.dark .typevariants {
  & .typevariant-root {
    border: 1px solid hsl(var(--var-color) / 0.3);

    &:hover,
    &:target {
      border: 1px solid hsl(var(--var-color) / 0.6);
    }
  }
}

@media (min-width: 65rem) {
  .type-datatype {
    width: max-content;
  }
  .type-generic {
    position: relative;
    top: 0;
    left: 0;
  }
  .root-nav {
    & .root-nav-entry {
      display: grid;
      grid-template-columns: 0.6fr 1.4fr;

      & .root-nav-desc {
        padding-left: 1rem;
        border-left: 1px solid hsl(var(--blue) 10% 15% / 0.6);
      }
    }
  }

  .typedocs-content {
    margin-inline: 1.272rem;

    & > p {
      margin-block: 1.217rem;
    }
  }
}

@media (min-width: 85rem) {
  .types-nav {
    display: block;
    position: fixed;
    top: 5rem;
    right: 10svw;
    width: 250px;
    max-height: 90svh;
    overflow-y: scroll;
    z-index: 10;

    & .props-list {
      color: hsl(var(--prop-color));

      & a {
        color: hsl(var(--prop-link-color));
      }
    }

    & .funcs-list {
      color: hsl(var(--func-color));

      & a {
        color: hsl(var(--func-link-color));
      }
    }

    & .signals-list {
      color: hsl(var(--signal-color));

      & a {
        color: hsl(var(--signal-link-color));
      }
    }

    & .vars-list {
      color: hsl(var(--var-color));

      & a {
        color: hsl(var(--var-link-color));
      }
    }

    & .types-list {
      list-style: none;

      & .types-item {
        margin-block: 10px;
        display: flex;
        align-items: center;
        gap: 0.478rem;

        & svg {
          opacity: 0.6;
          width: 24px;
          height: 24px;
          transition: opacity 0.5s;
        }

        &:hover {
          & svg {
            opacity: 1;
          }
        }
      }
    }
  }
}
