@import '../../../../../assets/scss/variables';

.modal-wrapper {
  font-family: 'Open Sans';
  line-height: 21px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;

  .header {
    .close-icon {
      position: absolute;
      top: 25px;
      right: 25px;
    }

    .close-icon:hover {
      cursor: pointer;
    }
  }

  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 36px;
    margin-bottom: 40px;
    span {
      font-size: 20px;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
  }

  .product-wrapper {
    display: flex;
    flex-direction: row;
    padding: 20px;
    .icon {
      .thumbnail {
        max-width: 59px;
        max-height: 111px;
        box-shadow: 0 0 18px 0 #b8b3b7;
        border-radius: 6px;
      }
    }

    .details {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 15px;

      .authors-title-group-quantity {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .authors-title {
          padding-right: 10px;
          span {
            font-family: 'Open Sans';
            font-weight: bold;
            font-size: 16px;
            color: #000000;
          }
        }

        .group-quantity {
          display: flex;
          flex-direction: row;

          .group {
            font-size: 16px;
            color: #596470;
            display: flex;
            flex-direction: row;
            margin-right: 20px;

            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 100px;
            }
          }

          .quantity {
            padding-left: 20px;
          }
        }
      }

      .details-info {
        display: flex;
        flex-direction: row;

        .datas {
          display: flex;
          flex-direction: column;
          margin-left: 25px;

          .data {
            margin-top: 8px;

            &.format {
              display: flex;
              flex-direction: row;

              .format-description {
                font-family: 'Open Sans';
                font-size: 16px;
                font-weight: bold;
                color: #000000;
                margin-left: 5px;
                margin-top: 2px;
              }
            }

            .features {
              display: flex;
              flex-direction: row;
              margin-top: -4px;

              span {
                color: #596470;
                padding-right: 5px;
                font-weight: bold;
                cursor: pointer;
              }
            }

            .feature-tooltip {
              position: absolute;
              background-color: #5a728a;
              margin-top: -60px;
              color: #ffffff;
              padding: 12px;
              border-radius: 5px;

              lib-icon {
                margin-left: 5px;
                cursor: pointer;
              }
            }

            .feature-tooltip-arrow-down {
              position: absolute;
              width: 0;
              height: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-top: 10px solid #5a728a;
              margin-top: -15px;
            }

            .reason-error {
              font-family: 'Open Sans';
              font-weight: bold;
              font-size: 16px;
              color: $hima-error-msg-color;
            }

            .dd-width {
              width: fit-content;
            }
          }
        }

        .labels {
          display: flex;
          flex-direction: column;

          .label {
            margin-top: 8px;
          }
        }
      }
    }
  }

  .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 28px;
    margin-right: 20px;
    padding-bottom: 15px;
  }

  .empty-feature {
    min-height: 16px;
  }
}
