.digit-tag-error-container {
  @apply flex flex-col max-w-full;
  gap: theme(digitv2.spacers.spacer1);
}

.digit-tag-container {
  @apply flex flex-wrap mb-md items-center;
  gap: theme(digitv2.spacers.spacer2);
  margin-top: theme(digitv2.spacers.spacer2);

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    max-width: 27.5rem;
    min-width: 12.5rem;
  }

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    width: 100%;
    max-width: 100%;
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    max-width: 37.5rem;
    min-width: 12.5rem;
  }

  .digit-tag {
    @apply inline-flex items-center h-10 w-full max-w-full;
    padding: theme(digitv2.spacers.spacer2);
    gap: theme(digitv2.spacers.spacer2);
    border-radius: theme(digitv2.spacers.spacer1);
    background: theme(digitv2.lightTheme.generic-background);
    margin: theme(digitv2.spacers.spacer0);
    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      height: theme(digitv2.spacers.spacer9);
    }
  
    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      height: theme(digitv2.spacers.spacer9);
    }
  

    &.clickable:hover{
      box-shadow: 0.125rem 0.125rem 0.25rem 0rem #36363633;
    }

    svg{
      flex-shrink: 0;
    }

    .digit-text {
      @extend .typography.body-xs;
      @apply overflow-hidden items-center whitespace-no-wrap;
      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-xs.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.body-xs.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.body-xs.desktop);
      }
      max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
      width: calc(100% - (theme(digitv2.spacers.spacer7)));
      text-overflow: clip;
      color: theme(digitv2.lightTheme.text-primary);
      display: flex;
      text-overflow: ellipsis;
    }

    .close-icon {
      @apply items-center w-6 h-6 cursor-pointer flex-shrink-0;
      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
      border-radius: theme(digitv2.spacers.spacer1);
      background-color: theme(digitv2.lightTheme.text-secondary);
      display: flex !important;
      justify-content: center;

      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        height: theme(digitv2.spacers.spacer5);
        width: theme(digitv2.spacers.spacer5);
      }
    
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        height: theme(digitv2.spacers.spacer5);
        width: theme(digitv2.spacers.spacer5);
      }

      &.disabled{
        pointer-events: none;
      }

      svg{
        @apply items-center flex-shrink-0;
        width: theme(digitv2.spacers.spacer6);
        height: theme(digitv2.spacers.spacer6);
        display: flex !important;
        justify-content: center;

        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
          /* Media query for tablets */
          height: theme(digitv2.spacers.spacer5);
          width: theme(digitv2.spacers.spacer5);
        }
      
        @media (max-aspect-ratio: 9/16) {
          /* Media query for mobile */
          height: theme(digitv2.spacers.spacer5);
          width: theme(digitv2.spacers.spacer5);
        }
      }
    }

    &.errortag {
      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
      background-color: theme(digitv2.lightTheme.paper-primary);
      box-shadow: 0.125rem 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #D4351C4D;

      .digit-text {
        @extend .typography.heading-xs;
        color: theme(digitv2.lightTheme.alert-error);
      }

      .close-icon {
        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
        background-color: theme(digitv2.lightTheme.alert-error);
      }
    }
  }
}

.digit-tag{
  &.noClose{
    display: flex;
    align-items: center;
    justify-content: center;

    &.noIcon{
      display: unset;
    }
  }
}

.cp{
  cursor: pointer;
}

.nonclickable{
  pointer-events: none;
  cursor:none;
}