@import "variables";

:host {
  .modal-container {
    background-color: $white;
    height: 100%;
    width: 100%;

    .graph-container {
      padding: 0 64px;
      background-color: $white;
    }

    &.dark-theme {
      background-color: $blue-950;

      .graph-container {
        background-color: $blue-950;
      }

      .graph-viewer-header {
        border-bottom: solid 1px transparent;
        color: $blue-100;

        .chart-title {
          color: $blue-100;
        }
      }

      .separator {
        border-left-color: $blue-500;
      }
    }

  }

  .graph-viewer-header {
    border-bottom: solid 1px #f1f1f1;
    position: relative;
    z-index: 1;

    .header-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    .load-spinner {
      display: inline-block;
      vertical-align: middle;
      background-image: url("../../../assets/icons/Spinner.svg");
      background-repeat: no-repeat;
      background-size: 18px;
      width: 24px;
      height: 24px;
      background-position: center;
    }

    .chart-title {
      width: 33%;
      font-size: 18px;
      color: $blue-500;
    }

    .title-color {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px;
      cursor: pointer;
    }

    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;


  }

  .smooth-options {
    margin-left: 24px;

    &.separator {
      border-left: 1px solid $blue-100;
      padding-left: 24px;
    }
  }
  .smooth-input {
    width: 76px;
    margin-left: 16px;
  }
  .smooth-selector {
    margin-left: 12px;
    width: 265px;
  }

  .smooth-type {
    width: 170px;
    margin-left: 6px;
  }

  .axis-type-field {
    width: 170px;
  }

  .graph-container {
    padding-top: 16px;
    @media (max-width: 1520px) {
      padding-top: 24px;
    }

    .navigation {
      position: fixed;
      top: 50%;

      .next {
        right: 45px;
      }

      .previous {
        left: 45px;
      }
    }

    .controller {
      position: fixed;
      width: 38px;
      height: 38px;
      border-radius: 30px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
      background-color: rgba(255, 255, 255, 0.85);
      transition: background-color 0.35s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 1);
      }
    }

    .icon-container {
      display: inherit;

      &.disabled {
        opacity: 0.5;
      }

      &:not(.disabled) {
        cursor: pointer;
      }
    }
  }

  .graph-controls {
    position: absolute;
    z-index: 1;
    top: 64px;
    display: flex;
    align-items: center;
    padding: 8px 24px 8px 80px;

    .label-text {
      white-space: nowrap;
      padding-right: 12px;
    }
    .smooth-options .label-text {
      padding-right: 16px;
    }
    @media (max-width: 1520px) {
      top: 64px;
      padding: 0 24px;
    }
  }


  .field {
    align-items: center;
    @media (max-width: 1520px) {
      align-items: unset;
      flex-direction: column;
      .label-text {
        font-size: 12px;
      }
    }
  }
}

.viewer-iteration {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  color: $blue-400;
  font-size: 18px;
  line-height: 1.5;
  margin-right: 16px;

  .number {
    color: $blue-500;
  }

  .mat-mdc-slider {
    min-width: 280px;
  }
}
