@import "../../../style/mixin";

@include export-module('model-creation-page-layout') {
  .model-creation-page {
    .model-creation-wrapper {
      width: $tp-model-creation-wrapper-width;
      height: fit-content;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: $tp-model-creation-wrapper-margin;

      .title {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        align-self: flex-start;
        margin-bottom: $tp-title-margin-bottom;

        co-icon {
          width: $tp-title-icon-size;
          height: $tp-title-icon-size;
          margin-right: $tp-title-icon-margin-right;
        }
      }

      .subtitle {
        align-self: flex-start;
        margin-bottom: $tp-subtitle-margin-bottom;
      }

      .upload {
        width: 100%;
        display: flex;
        gap: $tp-upload-gap;

        .info {
          display: flex;
          flex-direction: column;
          gap: $tp-info-gap;
          flex: $tp-info-flex;

          .subsubtitle {
            align-self: flex-start;
          }

          .quality-select {
            display: flex;
            gap: $tp-quality-select-gap;

            > * {
              width: 100%;
              height: $tp-quality-select-item-height;
              display: flex;
              align-items: center;
              cursor: pointer;
            }
          }
        }

        .file-uploads {
          display: flex;
          gap: $tp-file-uploads-gap;
          flex: $tp-file-uploads-flex;
          height: $tp-file-uploads-height;

          .upload-icon {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            co-icon {
              height: $tp-upload-icon-size;
              width: $tp-upload-icon-size;
            }
          }
        }
      }

      .upload-buttons {
        margin-top: $tp-upload-buttons-margin-top;
        display: flex;
        gap: $tp-upload-buttons-gap;
        justify-content: center;

        .cancel-button-stay-on-top {
          z-index: $tp-cancel-button-z-index;
        }
      }

      .results-grid {
        margin-top: $tp-results-grid-margin-top;
      }

      .disabled {
        pointer-events: none !important;
      }
    }
    co-button.has-label {
      padding: 0 10px !important;
      height: 36px !important;
      background-color: #1A73E8;
      cursor: pointer;
      color: white;
      transition: all 0.2s;
    }
  }

  .app-loader {
    position : fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    z-index : $tp-app-loader-z-index; //on top of the world
  }
}
