@import '@nebular/theme/styles/global/breakpoints';
@import '@nebular/theme/styles/theming';
@import '@nebular/theme/styles/themes';

.source-icon {
  nb-icon {
    font-size: 3rem;
  }
}

.stepper {
  display: flex;
  flex-wrap: wrap;

  > div {
    display: flex;

    &:not(:last-child) {
      flex: 1;
    }
  }

  .step {
    display: flex;
    align-items: center;
    position: relative;

    .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      color: nb-theme(color-basic-600);
      border-radius: 50%;
      border: 1px solid nb-theme(color-basic-600);
      min-width: 2rem;
      width: 2rem;
      height: 2rem;
    }

    .label {
      color: nb-theme(color-basic-transparent-focus-border);
    }

    &.done {
      .icon-wrapper {
        border-color: nb-theme(color-primary-400);
        background-color: nb-theme(color-primary-400);
        color: nb-theme(text-control-color);
      }
      .label {
        color: nb-theme(color-primary-400);
      }
    }

    &.running {
      .icon-wrapper {
        border-color: nb-theme(color-success-active);
        background-color: nb-theme(color-success-active);
        color: nb-theme(text-control-color);
        animation: rotation 2s infinite linear;
        nb-icon {
          font-size: 2rem;
        }
      }
      .label {
        color: nb-theme(color-success-active);
      }
    }

    .done-mark {
      position: absolute;
      bottom: 4px;
      left: 20px;
      background-color: var(--card-background-color);
      border-radius: 5rem;
      height: 16px;
      width: 16px;
      line-height: 0;

      .success {
        margin-left: -2px;
        color: nb-theme(text-success-active-color);
      }
    }
  }

  .connector {
    margin: 1rem;
    display: flex;
    align-items: center;
    flex: auto;

    .line {
      height: 1px;
      background-color: nb-theme(color-basic-500);
      flex: auto;
    }

    .arrow {
      display: inline-block;
      border: solid nb-theme(color-basic-500);
      border-width: 0 1px 1px 0;
      padding: 3px;
      margin-left: -6px;
      transform: rotate(-45deg);
    }

    &.active {
      .line {
        background-color: nb-theme(color-primary-400);
      }

      .arrow {
        border-color: nb-theme(color-primary-400);
      }
    }
  }

  .connectorpassed {
    .line {
      background-color: nb-theme(color-primary-default);
    }
    .arrow {
      border-color: nb-theme(color-primary-default);
    }
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.sessions {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 5rem;

  &.sessions-header {
    border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color);
  }

  &.sessions-body {
    &:not(:last-child) {
      border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color);
    }

    > DIV {
      padding-top: 0.5rem;
    }
  }

  > DIV {
    padding-bottom: 0.5rem;
  }
}
