@use "sass:map";
@use "sass:list";

// 1: Image,
// 2: Text

@mixin FlexEmbroideryPreviewStyles($type) {
  @if ($type == 1) {
    & > .emb__img__main__element {
      display: var(--_d-flex);
      grid-area: 1/1/2/2;
      position: var(--_p-relative);
      width: var(--_sf-embr-att-wdth, var(--_width-80));
      height: var(--_sf-embr-att-hght, var(--_height-80));

      & > .emb__img__wrapper {
        display: var(--_d-flex);
        width: 100%;

        & > div {
          &.emb__img__box {
            display: var(--_d-flex);
            width: 100%;
            height: 100%;
            border-radius: var(--_br-4);
            background: var(--_primary-25);
            display: var(--_d-flex);
            align-items: center;
            justify-content: center;

            & > svg {
              width: 65%;
              height: 65%;
            }
          }
          &.emb__img__data__box {
            display: var(--_d-flex);
            width: 100%;
            height: 100%;

            & > img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  } @else if($type == 2) {
    & > .emb__text__main__element {
      display: var(--_d-flex);
      grid-area: 1/1/2/2;
      position: var(--_p-relative);
      width: var(--_sf-embr-att-wdth, var(--_width-80));
      height: var(--_sf-embr-att-hght, var(--_height-80));

      & > .emb__text__wrapper {
        display: var(--_d-flex);
        width: 100%;

        & > div {
          &.emb__text__box {
            display: var(--_d-flex);
            width: 100%;
            height: 100%;
            border-radius: var(--_br-4);
            background: var(--_primary-25);
            display: var(--_d-flex);
            align-items: center;
            justify-content: center;

            & > svg {
              width: 65%;
              height: 65%;
            }
          }

          &.emb__text__data__box {
            display: var(--_d-flex);
            width: 100%;
            height: 100%;

            & > span {
              word-break: break-all;
              width: 100%;
              text-align: center;
            }
          }
        }
      }
    }
  }
}