@use "./size" as size;

@keyframes tp__pulse-bg {
  0% {
    background-color: var(--pulse-color-1);
  }
  50% {
    background-color: var(--pulse-color-2);
  }
  100% {
    background-color: transparent;
  }
}

.tp__pulse {
  animation: tp__pulse-bg 500ms ease-out;
}

.tp__error-text {
  color: var(--attention-color);
  font-size: var(--font-size-base);
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

@media (pointer: fine) {
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: var(--scrollbar-track-shadow);
    border-radius: var(--scrollbar-border-radius);
    background-color: var(--scrollbar-track-color);
  }

  ::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-width);
    background-color: var(--scrollbar-handle-color);
  }
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: bold;
}

button {
  cursor: pointer;
}

.tp__hidden {
  display: none !important;
}

select {
  padding: 2px 4px;
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

select option {
  background-color: var(--popup-background-color);
  color: var(--popup-color);
  border-color: var(--popup-border-color);
}

:not(input[type="text"]) {
  caret-color: transparent;
}

input[type="text"] {
  caret-color: auto;
}

option {
  cursor: pointer;
}

.tp__delete_action {
  color: var(--attention-color) !important;
  fill: currentcolor !important;
}

.tp__update_action {
  color: var(--active-color) !important;
  fill: currentcolor !important;
}

.svg-icon {
  display: block;
  pointer-events: none;
  width: 1.3rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

li {
  background: transparent;
}

.tp__full-width {
  box-sizing: border-box;
  width: 100%;
  align-items: center;
}

.tp__full-height {
  box-sizing: border-box;
  height: 100%;
  align-items: center;
}

.disabled {
  pointer-events: none;
  color: var(--hint-color);
}

.no-select {
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

.tp__unauthorized {
  height: 100%;
  width: 100%;
  font-size: var(--font-size-xl);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tp__inline-toolbar {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--gap-micro);
  box-sizing: border-box;

  .tp__icon-button {
    &:hover {
      background-color: var(--icon-button-hover-background-color);
      border-radius: 50%;
    }
  }
}

.tp__toolbar {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-small);
  box-sizing: border-box;

  .tp__icon-button {
    &:hover {
      background-color: var(--icon-button-hover-background-color);
      border-radius: 50%;
    }
  }
}

::selection {
  background-color: #0078d4;
  color: #ffffff;
}