@import "variables";

$topbar-height: 50px;

.evo-topbar {
  position: fixed;
  top: 0;
  left: 0;
  height: $topbar-height;
  width: 100%;
  display: block;
  z-index: 101;
  background-color: $color-almostblack;
  color: $color-almostwhite;
  .evo-logo {
    position: absolute;
    top: 8px;
    left: 14px;
    > img {
      width: 160px;
      height: 40px;
    }
  }
  > .github {
    position: absolute;
    right: 10px;
    top: 10px;
    > svg {
      fill: $color-almostwhite;
    }
    &:hover {
      > svg {
        fill: $color-blue1;
      }
    }
    @media (max-width: 600px) {
      display: none;
    }
  }
}
.icons-always,
.icons-context {
  height: $topbar-height;
  > a {
    display: inline-block;
    &:focus {
      > .crud-icon > div {
        display: none;
      }
    }
  }
}
.topbar-icons {
  position: absolute;
  top: 2px;
  left: 190px;
  z-index: 110;
  > .icons-context {
    position: absolute;
    top: 0;
    left: 260px;
    min-width: 160px;
  }
  .crud-icon > div {
    white-space: nowrap;
  }
}

@media print {
  .topbar-icons {
    display: none;
  }
}
