.top-sheet.top-sheet {
  padding: 4px;
  text-decoration: none;

  & > .info {
    display: block;
    background: darken($base-a, 0%);
    color: white;
    text-align: left;
    padding: 16px;
    width: auto;
    border-radius: 3px;
    box-shadow: $shadow2;
    text-shadow: 0 1px 1px rgba($base-text, 0.3);
    white-space: nowrap;
  }

  &:hover > .info,
  &:focus > .info {
    box-shadow: $shadow3;
  }

  &:nth-of-type(3n + 1) {
    & > .info {
      background: linear-gradient(
        15deg,
        $base-a,
        adjust-color($base-a, $lightness: 4%, $hue: 20deg));
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-a, 8%);
    }
  }

  &:nth-of-type(3n + 2) {
    & > .info {
      background: linear-gradient(
        15deg,
        $base-mute,
        adjust-color($base-mute, $lightness: 4%, $hue: -10deg));
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-mute, 8%);
    }
  }

  &:nth-of-type(3n + 3) {
    & > .info {
      background: linear-gradient(
        15deg,
        $base-c,
        adjust-color($base-c, $lightness: 2%, $hue: 6deg));
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-c, 8%);
    }
  }

  & > .info > .title {
    display: none;
  }
}