.bar {
  position: relative;
  user-select: none;
  padding: 4px 8px;
  border: 1px solid #a9bfd6;
  box-shadow: inset 0px 0px 0px 1px #a9c5d3;
  border-radius: 0px;
  background: linear-gradient(#fcfdfe, #e7f1fb 50%, #dce6f4 50%, #dde9f7);
  isolation: isolate;
}

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

.vista-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #beccdd;
  box-shadow: inset 1px 1px 4px -2px #0006;
  border-radius: inherit;
  background: linear-gradient(
    #cad5e4,
    #dfeaf3 5%,
    #d9e5f2 50%,
    #cfdbec 50%,
    #cfdced
  );
  background-repeat: no-repeat;
  opacity: 0;
  transition: inherit;
}

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

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

.vista-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #cad6e3;
  box-shadow: inset 0px 0px 0px 1px #fff9;
  border-radius: inherit;
  background: linear-gradient(#f8fbfe, #eef3fb 50%, #d7e4f4 50%, #c2d3e9);
  background-repeat: no-repeat;
  opacity: 0;
  transition: inherit;
}

.vista-button:hover::before {
  opacity: 1;
}

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