@use './src/styles/vendor/variables' as vv;
@use './src/styles/defaults/mixins';
@use '@carbon/layout';

$scrollbar-thumb-color: rgba(128, 128, 128, 0.3);
$scrollbar-track-color: transparent;

@mixin row-details-icon {
  color: vv.$gray-900;
  font-family: 'ForkAwesome', sans-serif;
  font-size: 1rem;
  line-height: 1;
}

@keyframes progress-loading {
  from {
    left: -200px;
    width: 15%;
  }

  50% {
    width: 30%;
  }

  70% {
    width: 70%;
  }

  80% {
    left: 50%;
  }

  95% {
    left: 120%;
  }

  to {
    left: 100%;
  }
}

.reload {
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.no-data {
  font-size: 1.1rem;
  height: 5rem;
}

::ng-deep .table-actions {
  display: flex;
  flex-flow: row-reverse;
  gap: 0.1em;
}

.filter-tags {
  background-color: var(--cds-layer-accent);
  border-bottom: 1px solid var(--cds-layer-active);
  color: var(--cds-text-primary);
}

::ng-deep div.cds--batch-actions.cds--batch-actions--active {
  background-color: vv.$primary;
}

::ng-deep div.cds--batch-summary {
  background-color: vv.$primary;
}

.scrollable-expanded-row {
  max-height: 40vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
  scrollbar-width: thin;
}

.scrollable-expanded-row::-webkit-scrollbar {
  height: layout.rem(6px);
  width: layout.rem(6px);
}

.scrollable-expanded-row::-webkit-scrollbar-thumb {
  background-color: $scrollbar-thumb-color; /* Grey with transparency */
  border-radius: layout.rem(10px);
}

.scrollable-expanded-row::-webkit-scrollbar-track {
  background: transparent;
}
