@use './colors';
@use './mixins';
@use './borders';
@use './shadows';

.table {
  &__item {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: calc(100% - 250px);
    height: 100%;
    padding: 20px 30px;
    overflow-y: auto;
    color: colors.$mulledWine;
    background-color: colors.$white;
    border: 1px solid colors.$magnoliaWhite;
    border-radius: 0 4px 4px 0;

    &_big {
      width: 100%;
    }

    &-popup {
      border-radius: 8px;
    }

    .error {
      margin-bottom: 10px;
    }

    .item {
      &-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
        margin: 0 0 1em 0;

        &-wrapper {
          position: sticky;
          top: 0;
          left: 0;
          z-index: 6;
          background-color: inherit;
        }

        &__title {
          display: flex;
          align-items: center;
        }

        &__status {
          color: colors.$topaz;
          line-height: 25px;

          &-row {
            display: flex;
            flex: 1 0 100%;
            flex-flow: row wrap;
            align-items: center;
            margin-bottom: 5px;

            .info-banner {
              display: flex;
              gap: 8px;
              align-items: center;
              max-width: 100%;
              height: 36px;
              padding: 4px 8px;
              background-color: colors.$magnoliaWhite;
              border-radius: 4px;
            }
          }
        }

        &__back-btn {
          margin-right: 5px;

          & > * {
            margin: 0;
          }
        }

        &__navigation-buttons {
          display: flex;
        }

        &__pods {
          &-error {
            color: colors.$spunPearl;
          }
        }

        &__data {
          flex: 1 0 0;
          min-width: 250px;
          margin-right: auto;

          h3 {
            margin: 0 0 5px 0;
            font-size: 24px;
            line-height: 28px;
          }

          .state {
            display: inline-block;
            min-width: 18px;

            i {
              margin: 0 10px 0 5px;
            }
          }

          .error-container {
            flex: 1;
            margin-left: 0;

            &:not(:last-child) {
              margin-right: 1em;
              padding-right: 1em;
              border-right: borders.$secondaryBorder;
            }
          }
        }

        &__custom-elements {
          z-index: 7;
          display: flex;
          align-items: center;
          margin-right: 10px;
        }

        &__buttons {
          z-index: 7;
          display: flex;
          align-items: center;

          a {
            display: inline-block;
            margin: 21px 21px 21px 10px;

            &.details-close-btn {
              margin: 0;
            }
          }

          .btn {
            margin: 0 0.2rem;
          }

          .table-actions-container {
            display: block;
          }

          .actions-menu {
            &__container {
              display: block;

              .btn {
                padding: 0;
                border: none;

                &:hover {
                  background-color: transparent;
                }

                :first-child {
                  margin-right: 0;
                }
              }
            }
          }

          .details-date-picker {
            margin-right: 12px;
          }
        }
      }

      &__content {
        border-top: borders.$secondaryBorder;
      }
    }

    &_inputs {
      width: 100%;

      @include mixins.resetSpaces;

      &_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 27px 24px;
        border-bottom: borders.$secondaryBorder;

        div {
          min-width: 237px;
          padding: 0 5px;
        }
      }
    }

    &-logs {
      position: relative;
      display: flex;
      flex: 1;
      width: 100%;
      min-height: 200px;
      padding: 10px 0;
      color: colors.$white;
      font-family: 'Source Code Pro', 'Courier New', monospace;
      white-space: pre-wrap;
      background-color: colors.$black;

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      &-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      &-content {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        overflow-y: scroll;

        /* Define the thumb style */
        &::-webkit-scrollbar-thumb {
          background: colors.$doveGray;
          border-radius: 5px;
        }
      }

      &-panel {
        padding: 0 10px;

        .logs-refresh {
          .btn {
            min-width: 40px;
            padding: 0;
            border-radius: 50%;

            & > * {
              margin: 0;
            }
          }
        }

        .logs-loader {
          width: 40px;
          height: 40px;
        }
      }
    }

    &_artifacts {
      display: flex;
      flex: 1;
      flex-direction: column;

      &_wrapper {
        width: 100%;
      }
    }

    .details-item {
      &__buttons-block {
        display: flex;
      }

      &__apply-btn-wrapper {
        width: 30px;
      }

      &__apply-btn {
        display: block;
        min-width: 30px;
        height: 30px;
        margin: 0;
        padding: 0;
      }
    }

    .preview_container {
      display: flex;
      flex-flow: column;
      width: 100%;
      height: 100%;

      &-multi {
        gap: 20px;
      }

      &__header {
        display: flex;
        justify-content: space-between;

        &-text {
          align-self: center;
        }
      }

      .inputs_container {
        width: 100%;
      }

      .accordion {
        &__container {
          &.open {
            .accordion__body {
              overflow: initial;
            }
          }
        }
      }

      .preview {
        &_popout {
          margin: 0;
          padding: 0;
          background: colors.$white;
          border: none;
          outline: none;
          cursor: pointer;
        }
      }

      .json {
        padding: 0 15px;
      }

      .preview-table {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: auto;

        .table-header {
          top: 0;
        }
      }
    }

    &_code {
      flex: 1;
      overflow: auto;

      h3 {
        text-align: center;
        vertical-align: middle;
      }

      pre {
        padding: 8px 16px;
        white-space: pre-wrap;
        word-break: break-word;
      }
    }

    &.pop-up-dialog-opened {
      overflow-y: hidden;
    }

    .chips {
      &-wrapper {
        flex-wrap: wrap;
        width: 100%;
      }
    }
  }
}