@import url("../index.scss");

.label-field-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: theme(digitv2.spacers.spacer1);
    width: 100%;
}

.digit-header-content {

    &.label {
        @extend .typography.label;
        @apply flex ;
        color: theme(digitv2.lightTheme.text-primary);
        gap: theme(digitv2.spacers.spacer1);

        &.wraplabel {
            @media (min-aspect-ratio: 9/16){
                height: fit-content;
                word-break: break-word;
            }
        }

        &.boldLabel{
          font-weight: 700;
        }

        .label-container {
            @apply flex items-center w-full;
            gap: theme(digitv2.spacers.spacer1);

            &.wraplabel{
                @media (min-aspect-ratio: 9/16) {
                    @apply items-end;
                }
            }
        }

        .info-icon {
            @apply relative cursor-pointer;
            width: 1.188rem;
            height: 1.188rem;
        }

        .info-icon .infotext {
            @extend .typography.body-s;
            @apply absolute text-center;
            font-family: theme(digitv2.fontFamily.sans);
            font-style: theme(digitv2.fontStyle.normal);
            font-weight: theme(digitv2.fontWeight.regular);
            line-height: theme(digitv2.lineHeight.lineheight2);
        
            @media (max-aspect-ratio: 9/16) {
              /* Media query for mobile */
              font-size: theme(digitv2.fontSize.body-s.mobile);
            }
        
            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
              /* Media query for tablets */
              font-size: theme(digitv2.fontSize.body-s.tablet);
            }
        
            @media (min-aspect-ratio: 3/4) {
              /* Media query for desktop */
              font-size: theme(digitv2.fontSize.body-s.desktop);
            }
            visibility: hidden;
            width: 7.5rem;
            background-color: #555555;
            color: theme(digitv2.lightTheme.paper-primary);
            padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: -3.75rem;
            border-radius: 0.375rem;
        }

        .info-icon:hover .infotext {
            @apply visible;
        }

        .label-styles {
            @apply overflow-hidden whitespace-no-wrap;
            text-overflow: ellipsis;

            &.wraplabel {
                @media (min-aspect-ratio: 9/16){
                    @apply whitespace-normal;
                }
            }
        }

        &.search-screen{
            width: 100%;
        }
    }
}

.digit-field {

    @apply flex flex-col w-full;
    gap: theme(digitv2.spacers.spacer1);

    .digit-description,
    .digit-charcount {
        @extend .typography.body-s;
        @apply flex justify-between items-baseline;
        color: theme(digitv2.lightTheme.text-secondary);
        gap: theme(digitv2.spacers.spacer2);
        font-family: theme(digitv2.fontFamily.sans);
        font-style: theme(digitv2.fontStyle.normal);
        font-weight: theme(digitv2.fontWeight.regular);
        line-height: theme(digitv2.lineHeight.lineheight2);
    
        @media (max-aspect-ratio: 9/16) {
          /* Media query for mobile */
          font-size: theme(digitv2.fontSize.body-s.mobile);
        }
    
        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
          /* Media query for tablets */
          font-size: theme(digitv2.fontSize.body-s.tablet);
        }
    
        @media (min-aspect-ratio: 3/4) {
          /* Media query for desktop */
          font-size: theme(digitv2.fontSize.body-s.desktop);
        }


        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
            max-width: 27.5rem;
        }

        @media (max-aspect-ratio: 9/16) {
            max-width: 100%;
            width: 100%;
        }

        @media (min-aspect-ratio: 3/4){
            max-width: 37.5rem;
        }
    }

    .digit-charcount {
        @apply justify-end;
    }
}

.digit-form-card-subheader {
    @extend .typography.caption-l;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.medium);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.caption-l.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.caption-l.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.caption-l.desktop);
    }
    color: theme(digitv2.lightTheme.text-primary);
}

.digit-form-card-description {
    @extend .typography.heading-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-secondary);
}

.digit-form-card-text {
    @extend .typography.body-l;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-l.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-l.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-l.desktop);
    }
    color: theme(digitv2.lightTheme.text-secondary);

}

.sectionSubHeaderStyle{
  @extend .typography.body-s;
  @apply flex justify-between items-baseline;
  color: theme(digitv2.lightTheme.text-secondary);
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }
}