@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #1A1E23;
}

.split-menu {
  --primary-color: #03a9f4;
  --secondary-color: #ffffff;
  --border-color: #d2d5e4;

  display: flex;
  list-style-type: none;

  li {
    &:not(:last-child) {
      border-right: 2px dotted var(--border-color);
    }

    a {
      display: flex;
      padding: 6px 2em 3px;
      color: white;
      font-family: Lato, sans-serif;
      text-decoration: none;
      overflow: hidden;
      transition: 0.5s;

      span.primary {
        position: relative;
        padding-right: 4px;
        color: var(--primary-color);
        transition: 0.3s;

        &::before {
          position: absolute;
          content: attr(data-text);
          color: var(--secondary-color);
          transform: translateY(130%);
          transition: 0.3s;
        }
      }

      span.secondary {
        position: relative;
        color: var(--secondary-color);
        transition: 0.3s;

        &::before {
          position: absolute;
          content: attr(data-text);
          color: var(--primary-color);
          transform: translateY(-130%);
          transition: 0.3s;
        }
      }

      &:hover {
        span.primary {
          transform: translateY(-130%);
        }

        span.secondary {
          transform: translateY(130%);
        }
      }
    }
  }
}
