@import "../../../../../styles/styles";
@import "../../../../../styles/shadow";

nav {
  &.head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--navigation-background);
    color: var(--text-inverse);
    z-index: 20;
    box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53);
    backdrop-filter: blur(10px);
    transition: var(--transition);

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    &.hidden {
      @media screen and (max-width: 860px) {
        // top: -60px;
      }
    }

  }
}

.actions {
  display: flex;
  height: 100%;
  align-items: center;
  padding-right: 12px;
}

.actions-search {
  gap: var(--gap-s);
  padding-right: 20px;
}

.theme-toggle {
  color: var(--text-inverse);
  transition: var(--transition-fast);

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

.theme-toggle fa-icon {
  font-size: 14px;
}

.links {
  display: flex;
  height: 50px;
}