* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  font-family: Open Sans;

  box-sizing: border-box;

  *:before, *:after {
    box-sizing: border-box;
  }
}

body {
  background-color: #f2f2f2;
}
.wrapper {
  $height: 70px;

  .menu {
    background-color: #333;
    color: white;

    li {
      display: inline-block;
      width: 70px;
      height: $height;
      border-right: 1px solid #393939;
      cursor: pointer;
      font-size: 1.5rem;
      text-align: center;
      line-height: $height;

      &.success {
        &:hover {
          background-color: #60bb71;
        }
      }

      &.warning {
        &:hover {
          background-color: #f7a336;
        }
      }

      &.info {
        &:hover {
          background-color: #58abc3;
        }
      }

      &.error {
        &:hover {
          background-color: #db6a64;
        }
      }

      &.light, &.message {
        &:hover {
          background-color: #fcfcfc;
          color: #333;
        }
      }

      &:last-child {
        border-right: none;
      }
    }
  }
  
  .content {
    width: 100%;
    text-align: center;
    button {
      margin: 20px;
    }
  }
}
