.menu-main {
  background-color: $color-5;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  ul ul {
    display: none; // TODO: change to not visible
  }
  ul > li:hover,
  ul > li:focus,
  ul > li:focus-within {
    ul {
      display: block;
    }
  }

  ul.list {
    display: flex;

    justify-content: center;
    li {
      a {
        display: inline-block;
        text-decoration: none;
        text-transform: uppercase;
        color: $color-white;
        padding: 0.5rem 1rem;
        transition: all 0.4s ease-out;
        &:hover,
        &:focus {
          background-color: $color-white;
          color: $color-5;
        }
      }
    }
  }

  ul.sublist {
    position: absolute;
    background-color: rgba($color-5, 0.8);
    li {
      a {
        display: inline-block;
        background-color: $color-5;
        color: $color-white;
        padding: 0.5rem 1rem;
        transition: all 0.4s ease-out;
        &:hover,
        &:focus {
          background-color: $color-white;
          color: $color-5;
        }
      }
    }
  }
}