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

  & > .info {
    display: block;
    background: var(--brand-a);
    color: white;
    text-align: left;
    padding: 16px;
    width: auto;
    border-radius: 3px;
    box-shadow: var(--shadow2);
    text-shadow: 0 1px 1px color-mod(var(--text-body) alpha(30%));
    white-space: nowrap;
  }

  &:hover > .info,
  &:focus > .info {
    box-shadow: var(--shadow3);
  }

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

    &:hover > .info,
    &:focus > .info {
      background: color-mod(var(--brand-a) lightness(-8%));
    }
  }

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

    &:hover > .info,
    &:focus > .info {
      background: color-mod(var(--text-mute) lightness(-8%));
    }
  }

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

    &:hover > .info,
    &:focus > .info {
      background: color-mod(var(--brand-c) lightness(-8%));
    }
  }

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