@import "../../../styles/variables";


* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  overflow: auto;
  cursor: pointer;
}

.navbar:focus {
  outline: -webkit-focus-ring-color auto 1px;
}

.navbar a {
  float: left;
  padding: 8px 0px 8px 16px;
  color: $chef-black;
  height: 36px;
  text-decoration: none;
  font-size: 14px;
  width: 24.8%; /* Four links of equal widths */
  text-align: left;
  margin-left: 1px;
  background: #DEE5FD;

}

.navbar a:hover {
  background-color: #FFFFFF;
  color: $chef-primary-bright;
}

.navbar a:focus {
  outline: none;
  border: 1px solid $chef-primary-bright;
  border-radius: 4px;
}

.navbar a.active {
  background: $chef-primary-bright;
  border: none;
  color: #FFFFFF;
}

.navbar a.disabled {
  pointer-events: none;
  cursor: default;
}

.navbar a:first-child {
  border-radius: 4px 0px 0px 4px;
}

.navbar a:last-child {
  border-radius: 0px 4px 4px 0px;
}

@media screen and (max-width: 500px) {
  .navbar a {
    display: block;
    float: none;
    width: 100%;
    text-align: left;
  }
}
