:root {
  --color-white: #fdfdfd;
  --color-dark: #0a0d13;
  --color-menu-bg: #161b22;
  --color-item-hover: #b1bac41f;
  --color-border: #30363d;

  --col-gap: 1rem;
  --row-gap: 1rem;
  --p-inline: 2rem;
  --p-block: 1rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  width: 100%;
  background-color: var(--color-dark);
  font-family: "Poppins";
}
a {
  text-decoration: none;
  color: inherit;
}
ul,
menu {
  list-style: none;
}
svg path {
  fill: var(--color-white);
}
.header {
  height: 75px;
  width: 100%;
  padding-inline: var(--p-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-dark);
  color: var(--color-white);

  & .header-icons {
    display: flex;
    align-items: center;
    column-gap: var(--col-gap);

    & .icon,
    & .drop-down {
      padding-block: calc(var(--p-block) * 0.5);
      padding-inline: calc(var(--p-inline) * 0.35);
      border-radius: 0.25rem;
      border: 2px solid var(--color-border);
      cursor: pointer;
    }
  }

  & .drop-down {
    position: relative;
    --_gap: 1rem;

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      height: var(--_gap);
      width: 100%;
      background-color: transparent;
    }

    & .menu {
      padding-block: calc(var(--p-block));
      padding-inline: calc(var(--p-inline) * 0.5);
      position: absolute;
      top: calc(100% + var(--_gap));
      left: 0;
      background-color: var(--color-menu-bg);
      flex-direction: column;
      row-gap: calc(var(--row-gap) * 0.25);
      width: 250px;
      display: none;

      &:is(:hover, #id) {
        display: flex;
      }
    }

    & .menu-item > a {
      display: flex;
      align-items: center;
      column-gap: calc(var(--col-gap) * 0.5);
      padding-block: calc(var(--p-block) * 0.5);
      padding-inline: calc(var(--p-inline) * 0.35);
      border: none;
      border-radius: 0.5rem;

      & > *:has(svg) {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &:hover {
        background-color: var(--color-item-hover);
      }
    }

    & .menu-item__divider {
      width: 100%;
      height: 1px;
      background-color: var(--color-border);
    }

    &:hover {
      & .menu {
        opacity: 1;
        display: flex;
      }
    }
  }
}
