.cursor-pointer {
  cursor: pointer;
  user-select: none;
}

.unselectable {
  user-select: none;
}

.opacity-1 {
  opacity: 1;
}

.opacity-0 {
  opacity: 0;
}

.is-hidden {
  display: none !important;
}

.v-btn.text {
  background: transparent !important;
  color: var(--button-color-1) !important;
  box-shadow: none;
}

.v-btn.button-1 {
  background: var(--button-bg-color-1) !important;
  color: var(--button-color-1) !important;
  box-shadow: none;
}

.v-btn.button-2 {
  background: var(--button-bg-color-2) !important;
  color: var(--button-color-2) !important;
  box-shadow: none;
}

.custom-divider {
  padding: 18px 0px;
  border-top: 1px solid;
  width: 100%;
  border-width: thin;
  border-color: var(--highlight-color-2)
}

.custom-divider[vertical] {
  margin: 0px 4px;
  height: 20px;
  width: 2px;
  background-color: var(--highlight-color-2)
}

.text--title-1 {
  font-size: 28px;
  color: var(--title-color-1);
}

.text--title-2 {
  font-size: 20px;
  color: var(--title-color-1);
}

.text--sub-title-1 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--sub-title-color-1);
  text-transform: uppercase;
  user-select: none;
}

.text--sub-title-2 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--color-5);
}

.text--description-1 {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--color-7);
}

.content__description {
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.5;
  word-break: break-word;
  color: var(--sub-title-color-1);
}

.divider-color-1 {
  border-color: var(--divider-color-1) !important;
}

.divider-color-2 {
  border-color: var(--divider-color-2) !important;
}

/* Note: this method doesn't break alignment inside grid */
.truncate-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Note: this method breaks alignment inside grid */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.fade-mask--top-and-bottom {
  mask: linear-gradient(transparent, black 10%, black 90%, transparent 100%);
}

.fade-mask--top {
  mask: linear-gradient(to bottom, transparent 0%, black var(--fade-mask-top));
}

.fade-mask--bottom {
  mask: linear-gradient(to top, transparent 0%, black var(--fade-mask-bottom));
}

.inline-code--light {
  border-radius: 4px;
  background: rgb(255, 255, 255, 0.1);
  padding: 3px 6px;
}

.code-block {
  width: 100%;
  overflow-y: auto;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

*[shadow~="left"][shadow~="x4"] {
  box-shadow: var(--shadow-x4);
}

*[shadow~="left"][shadow~="x4"]:hover {
  box-shadow: var(--shadow-x4_hover);
}

*[shadow="x3"] {
  box-shadow: var(--shadow-x3) !important;
}

.indicator--bottom {
  position: relative;
}

.indicator--bottom[indicator-is-active]::after {
  content: "";
  width: 16px;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 8px);
  height: 2px;
  background-color: var(--nav-panel-indicator-color);
  box-shadow: 0 0px 6px #0e6f96;
}
