/* ============= COMMON ============= */

.eventRow,
.eventRowActive,
.block,
.delay {
  position: relative;
  margin: 0.2em 0;
  width: 100%;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.block,
.delay {
  padding: 0.2em 1em;
  box-sizing: border-box;
  display: flex;
  gap: 1em;
}

.actionOverlay {
  display: flex;
  flex-direction: row;
  padding-top: 0.2em;
  gap: 0.5em;
  align-content: center;
  align-self: flex-start;
  opacity: 0.8;
  transition: linear 0.1s;
}

.eventRow:hover > .actionOverlay,
.eventRowActive:hover > .actionOverlay,
.block:hover > .actionOverlay,
.delay:hover > .actionOverlay {
  opacity: 1;
  transition: linear 0.1s;
}

/* NA */
.actionOverlay:hover {
  opacity: 1;
}
/* ============= EVENT ITEM ============= */

.eventRow,
.eventRowActive {
  padding: 0.2em 0.5em;
  padding-left: 1em;

  display: grid;
  grid-template-columns: auto 2em auto auto 1fr auto;

  justify-content: center;
  align-content: center;
  align-items: baseline;
  gap: 0.5em;
}

.eventRow {
  background-color: rgba(255, 255, 255, 0.02);
}

.eventRowActive {
  background-color: rgba(255, 255, 255, 0.36);
  background: linear-gradient(
    180deg,
    #00000000 10%,
    #4bffab10 89%,
    #227c52aa 90%,
    #4bffabcc 100%
  );
}

.drag {
  color: rgba(255, 255, 255, 0.37);
  align-self: center;
  /* cursor: grab; Later */
}

.indicators {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  font-size: 0.75em;
  overflow: hidden;
  min-width: 0;
  justify-content: center;
}

.next {
  color: #4bffabcc;
  width: max-content;
  padding: 0 0.2em;
}

.nextDisabled {
  color: rgba(255, 255, 255, 0.17);
}

.delayValue {
  color: #d69e2eaa;
  padding: 0 0.2em;
  text-align: center;
  align-self: flex-start;
  width: max-content;
}

.next:after,
.delayValue:after {
  content: '\200b';
}

.titleContainer,
.detailedContainer {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.rowDetailed {
  display: inline-flex;
  position: relative;
}

.titleContainer,
.detailedContainer {
  width: 90%;
  display: block;
}

.more {
  position: absolute;
  right: 0.25em;
  top: 0.5em;
}

/* ============= BLOCK BLOCK ============= */
.block {
  background-color: #805ad5;
  /* background: linear-gradient(0deg, #6b46c1 20%, #805ad5 21%); */
  background: linear-gradient(
    0deg,
    rgba(107, 70, 193, 0.4) 0%,
    rgba(128, 90, 213, 0.4) 20%,
    rgba(107, 70, 193, 0.15) 21%
  );

  flex-direction: row-reverse;
}

/* ============= DELAY BLOCK ============= */
.delay {
  background-color: #ecc94b;
  /* background: linear-gradient(180deg, #d69e2e 20%, #ecc94b 21%); */
  background: linear-gradient(
    180deg,
    rgba(214, 158, 46, 0.4) 0%,
    rgba(236, 201, 75, 0.4) 20%,
    rgba(214, 158, 46, 0.07) 21%
  );

  justify-content: space-between;
}