.main-header {
  border-bottom: 1px solid var(--medium-gray);

  display: flex;
  align-items: center;
  gap: 0.5rem;

  height: 3rem;

  background: var(--gray-800);

  & h1 {
    padding-left: 1rem;
    padding-right: 1rem;
    flex: 1;
    font-weight: 500;
    & a svg {
      width: 5rem;
    }
  }

  & a.btn {
    background-color: var(--gray-50);
  }

  & .dropdown button {
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0 1rem;
  }

  & .dropdown button:first-child {
    color: var(--gray-50);
    border-radius: 0;

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