.vuiTopicButton {
  display: inline-block;
  text-decoration: none;
  background-color: var(--vui-color-empty-shade);
  border-radius: $sizeXs;
  box-shadow: $shadowLargeStart;
  transition: box-shadow $transitionSpeed, border-color $transitionSpeed;
  overflow: hidden;
  padding: $sizeM $sizeL;
  text-align: left;

  &:hover {
    text-decoration: none;
    z-index: 1;
  }
}

.vuiTopicButton--fullWidth {
  width: 100%;
}

.vuiTopicButton--isDisabled {
  cursor: not-allowed;
  pointer-events: none;
}

.vuiTopicButton--primary:hover {
  box-shadow: $shadowLargeEnd, var(--vui-color-primary-shade) 0 0 1px 1px;
}

.vuiTopicButton--accent:hover {
  box-shadow: $shadowLargeEnd, var(--vui-color-accent-shade) 0 0 1px 1px;
}

.vuiTopicButton--compactRow {
  padding: $sizeS $sizeM;
}

.vuiTopicButton--compactGrid {
  padding: $sizeM;
}

// A subtle vertical rule separating the title from the description in the compact row.
.vuiTopicButton__divider {
  display: block;
  width: 1px;
  height: $sizeM;
  background-color: var(--vui-color-light-shade);
}