@import "../../style/theme";

.data-visualization-design {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  input[type='color'] {
    background: #FFFFFF00;
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    border: none;
    height: 2rem;
    width: 2rem;

    &::-webkit-color-swatch {
      border: none;
      border-radius: .5rem;
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: .5rem;
    }
  }

  .data-visualization-design-header {
    width: 100vw;
    height: 4.125rem;
    display: flex;
    justify-content: space-between;

    .data-visualization-design-header-black {
      font-size: 1rem;
      margin-top: 1.625rem;
      margin-left: 1.5rem;
      height: 1.25rem;
      line-height: 1.25rem;
      justify-content: space-between;

      .black {
        margin-left: .4rem;
        margin-top: -.15rem;
      }

      &:hover {
        div {
          svg {
            path {
              fill: $theme-color;
            }
          }
        }

        .black {
          color: $theme-color;
        }
      }
    }

    .data-visualization-design-header-option {
      margin-right: 1.25rem;
      margin-top: 1.3rem;
      display: flex;
      justify-content: end;
    }
  }

  .template-layers {
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;

    .template-layers-title {
      height: 2.94rem;
      font-size: 0.875rem;
      color: #3D3D3D;
      line-height: 49px;
      font-weight: 400;
      text-align: left;
      padding-left: 1.25rem;
    }

    .template-layers-item {
      width: 100%;
      height: 3rem;
      position: relative;

      .template-layers-item-container {
        position: absolute;
        top: .75rem;
        left: 1.25rem;
        width: (calc(100% - (1.25rem * 2)));

        .template-layers-item-content {
          height: 100%;
          width: 100%;
          justify-content: space-between;

          .template-layers-item-icon {
            svg {
              width: 0.875rem;
              height: 0.875rem;
            }
          }

          .template-layers-item-name {
            font-size: 0.875rem;
            margin-left: .38rem;
          }

          .template-layers-item-options {
            svg {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .preview-container {
    width: 100%;
    height: calc(100vh - 13rem);
    justify-content: center;
    align-items: center;

    .template-preview {
      aspect-ratio: 16 / 9;
      max-width: 78%;
      flex: 1;
      border-radius: 0.625rem;
      overflow: hidden;

      .hi-v4-loading__wrapper {
        height: 100%;
      }

      iframe {
        //display: none;
        transform: scale(0.48);
        transform-origin: 0 0;
        border-radius: 0.625rem;
      }
    }
  }

  .progress-bar {
    width: 100%;
    border-radius: 0.625rem;
    height: 5.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 6px 4rem 0 rgba(0, 0, 0, 0.25);

    .progress-bar-content {
      padding: 0 1.25rem;

      .progress-bar-play-icon {
        margin-top: 1.62rem;
      }

      .progress-bar-slider {
        height: 0.75rem;
        flex-shrink: 0;
        border-radius: 0.375rem;
        background: #E9E9E9;

        .progress-bar-slider-track {
          border-radius: 0.375rem;
          height: 100%;
          background: #0688E5;
          margin-top: 2.31rem;
          width: 64%;
          transition: all .2s;
        }
      }

      .progress-bar-time {
        text-align: right;
        line-height: 5.5rem;
      }
    }
  }

  .design-configs {
    width: 100%;
    height: calc(100vh - 6rem) !important;
    border-radius: 0.625rem;

    .select-bg-image {
      overflow: hidden;
      height: 10.5rem;
      text-align: center;
      line-height: 10.5rem;
      color: rgba(0, 0, 0, 0.6);
      font-size: .8rem;
      border-radius: 0.625rem;

      .select-bg-image-on {
        width: 100%;
        height: 100%;
        backdrop-filter: blur(4px);
        background: #00000017;
        z-index: 9;
        animation-duration: .2s;
      }

      img {
        height: 100%;
      }
    }

    .design-configs-top-options {
      height: 3rem;
      border-radius: 0.625rem 0.625rem 0 0;
      justify-content: left;
      padding-left: 1.87rem;

      .design-configs-top-options-item {
        color: #9EA5AF;
        font-size: 1rem;
        font-weight: 500;
        line-height: 3rem;
      }

      .active {
        color: #0688E5;
        font-weight: 700;
      }
    }

    .design-configs-container {
      padding: 1.25rem;
      overflow-y: auto;
      height: calc(96% - 3rem);

      .text-config {
        .text-config-item-label {
          font-size: 0.875rem;
        }

        .text-config-title {
          font-size: 0.875rem;
          font-weight: 500;
          padding-top: 1rem;

          &:before {
            content: "";
            width: .25rem;
            background-color: $theme-color;
            margin-right: .6rem;
            border-radius: 6px;
            display: block;
            height: 0.75rem;
            position: relative;
            top: .3rem;
          }

          &.dark-mode {
            color: $color-white;
          }
        }
      }

      .color-config {
        .color-config-item {
          margin-bottom: 1.5rem;

          .color-config-item-label {
            font-size: 0.875rem;
            font-weight: 500;

            &:before {
              content: "";
              width: .25rem;
              background-color: $theme-color;
              margin-right: .6rem;
              border-radius: 6px;
              display: block;
              height: 0.75rem;
              position: relative;
              top: .3rem;
            }
          }
        }
      }
    }
  }

  .config-line {
    width: 100%;
    height: 1px;
    margin: 2.5rem 0;
  }

}

.c-select-theme {
  width: 100%;
  height: 2.125rem;
  justify-content: space-between;

  div {
    background: #1CA8E3;
    flex: 1;

    &:first-child {
      border-radius: .5rem 0 0 .5rem;
    }

    &:last-child {
      border-radius: 0 .5rem .5rem 0;
    }
  }
}

.c-reset-button {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;

  svg {
    margin: auto;
    width: 0.875rem;
    display: block;
    position: relative;
    top: .3rem;
  }
}

.c-gradient-color-picker {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .375rem;
  padding: .5rem;
  border-radius: .5rem;
}

.c-select-file {
  height: 100%;

  .c-select-file-search {
    height: 2rem;

    button {
      float: right;
    }
  }

  .c-select-file-content {
    height: 400px;
    overflow-y: scroll;
  }

  .c-select-file-pagination {
    margin-top: 2%;
    display: flex;
    justify-content: end;
  }

  .c-image-waterfall {
    column-count: 5;
    column-gap: 10px;
    overflow-y: scroll;
    padding: 0 .5rem;

    .c-image-waterfall-item {
      height: 100%;
      break-inside: avoid;
      margin-bottom: 10px;

      img {
        width: 100%;
        border-radius: 0.625rem;
      }
    }
  }

  .c-audio-list {
    padding: 0 1rem;

    .hi-v4-space {
      width: 100%;
    }

    .hi-v4-space__item {
      width: 100%;
    }

    .c-audio-list-item {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 80px;

      .c-audio-list-item-time-line {
        width: 2px;
        height: 100%;
        border-left: 2px #f00 dashed;

        &:before {
          content: "";
          position: absolute;
          left: -6px;
          top: -2px;
          border-top: 6px solid rgba(253, 253, 253, 0);
          border-bottom: 6px solid transparent;
          border-right: 10px solid #f00;
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.c-resources-item {
  width: 100%;
  height: 14.625rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 1px solid #EEEFF1;
  background: #FFF;

  .c-resources-item-mask {
    background: rgba(0, 0, 0, 0.30);

    .c-resources-item-play-box {
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      border-radius: 50%;
      left: calc((100% - 2rem) / 2);
      top: calc((100% - 2rem) / 2);
      background: rgba(255, 255, 255, 0.50);

      .c-resources-item-play-box-content {
        margin-left: 0.8rem;
        margin-top: 0.5rem;
      }
    }
  }

  .c-resources-item-cover-box {
    width: 100%;
    height: 9.75rem;
    flex-shrink: 0;
    z-index: 5;
    border-radius: 0.75rem 0.75rem 0rem 0rem;


    .c-resources-item-option {
      margin-top: .62rem;
      justify-content: end;
      margin-right: calc(1.26rem - .62rem);

      .c-resources-item-option-item {
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
        border-radius: 0.5rem;
        margin-right: .62rem;

        svg {
          width: 0.75rem;
          height: 0.75rem;
          flex-shrink: 0;
          fill: #FFFFFF;
          left: calc((1.375rem - 0.75rem) / 2);
        }
      }
    }

    img {
      width: 100%;
      border-radius: 0.75rem 0.75rem 0rem 0rem;
    }
  }

  .c-resources-item-info {
    .c-resources-item-info-content {
      padding: 1.31rem 1.25rem;

      .c-resources-item-info-title {
        color: #333;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .c-resources-item-info-time {
        color: #999;
        font-size: 0.625rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-top: .5rem;
      }
    }
  }
}
