.bar {
  position: relative;
  user-select: none;
  padding: 4px 8px;
  border: 1px solid #546069;
  box-shadow: inset 0px 0px 0px 1px #a9c5d3;
  border-radius: 4px;
  color: #fff;
  text-shadow: 1px 1px #000;
  background: linear-gradient(
    #86b6be,
    #4e96a2 50%,
    #166777 50%,
    #1e6b7a 75%,
    #54a3ab
  );
  isolation: isolate;
}

.vista-button {
  position: relative;
  cursor: pointer;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  text-shadow: 1px 1px #000;
  transition:
    0.25s all,
    0.1s translate;
}

.vista-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #0d404e;
  box-shadow: inset 0px 0px 0px 1px #a9c5d3;
  border-radius: inherit;
  background: linear-gradient(#b0c9d7, #5a8ba5 50%, #185576 50%, #326c8b);
  background-repeat: no-repeat;
  opacity: 0;
  transition: inherit;
}

.vista-button:hover::after {
  opacity: 0.5;
}

.vista-button:active {
  translate: 1px 1px;
}

.vista-button:active::after {
  opacity: 1;
  translate: -1px -1px;
}