view-switcher.scss

.view-switcher {
  display: flex;
  justify-content: center;

  // These are the exact margins required to vertically align the top of the
  // view switcher with the top of the Hide Highlights button to its left,
  // and the top of the first annotation card below the view switcher with the
  // top of the New Page Note button to its left.
  margin-top: 1px;
  margin-bottom: 6px;
}

.view-switcher__tab {
  @include smallshadow

  height: 30px; // Same height as used for Hide Highlights and New Page Note
                // buttons to left of view switcher.
  padding-left: 12px;
  padding-right: 12px;

  background: $white;
  transition: background-color .1s linear;

  // This fixes the tabs flashing gray for a moment each time you tap on one
  // in iOS Safari.
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  border: 1px solid $gray-lighter;

  cursor: pointer;
  user-select: none;
}

.view-switcher__tab {
  border-right-width: 0;
}
.view-switcher__tab:last-child {
  border-right-width: 1px;
}

.view-switcher__tab:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.view-switcher__tab:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.view-switcher__tab:focus {
  outline: 0;
}
.view-switcher__tab::-moz-focus-inner {
  border: 0;
}

.view-switcher__tab:hover,
.view-switcher__tab.is-selected {
  background-color: #e6e6e6;
}

.view-switcher__empty-message {
  position: relative;
  top: 10px;
}