forstok-ui-lib 5.3.5 → 5.4.3

package/src/components/masterTable/styles.tsx

@@ -0,0 +1,1012 @@
+import styled, { css } from 'styled-components';
+import { formLabel, elipsis, thirdElipsis } from '../../assets/stylesheets/bases.styles';
+import IconEditWhite from '../../assets/images/icons/edit-white.svg';
+import IconLoadingRed from '../../assets/images/icons/loading-red.svg';
+
+const divHeaderCell = css`
+  overflow: hidden;
+  position: relative;
+  top: 0;
+  display: inline-block;
+  height: 50px;
+  padding: 10px 10px;
+  border-right: 1px solid var(--tab-clr-ln);
+  font-weight: 600;
+  line-height: 15px;
+  font-size: 1em
+  color: var(--hd-clr);
+  transition: width .25s ease-in-out;
+`
+const divCell = css`
+  overflow: hidden;
+  position: relative;
+  top: 0;
+  display: inline-block;
+  min-height: 82px;
+  padding: 16px 9px 10px 10px;
+  border-right: 1px solid var(--tab-clr-ln);
+  line-height: 1.2;
+  transition: width .25s ease-in-out, height .25s ease-in-out;
+  vertical-align: top;
+  i {
+    align-self: flex-start;
+    cursor: pointer;
+  }
+`
+const divCellReset = css`
+  overflow: auto;
+  top: auto;
+  height: auto;
+  padding: 0;
+  border: 0;
+  cursor: default;
+`
+const errrorLists = css`
+  input, textarea, .table-image-figure.is-error, .rc-cascader-selector, ._refCascaderContainer > div {
+    border: 1px solid var(--err-clr-ln) !important;
+  }
+  input.rc-cascader-selection-search-input {
+    border: none !important;
+  }
+  ._refContainer  > div > div {
+    border-color: var(--err-clr-ln);
+    input {
+      border: none !important;
+    }
+  }
+`
+const commonCSSLists = css`
+  .table-image-figure {
+    display: block;
+    overflow: hidden;
+    width: 56px;
+    height: 56px;
+    margin: 0px;
+    position: relative;
+    border: 1px solid var(--pri-clr-ln);
+    background-color: var(--pri-clr-bg);
+    border-radius: var(--ter-rd);
+    &.edit, &.add, &.loading {
+      width: 70px;
+      height: 70px;
+      cursor: pointer;
+      img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+        background-color: var(--pri-clr-bg);
+      }
+    }
+    &.add {
+      background-color: #fbfdff;
+      border: 1px dashed #828ea3;
+      span {
+        color: #828ea3;
+        font-size: 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    &.edit {
+      border: 1px solid rgba(0, 0, 0, .04);
+      &:hover {
+        position: relative;
+        span { 
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+          background-color: var(--ov-clr-bg);
+        }
+        &::after { 
+          content: url(${IconEditWhite});
+          height: 14px
+          width: 14px;
+          display: inline-block;
+          pointer-events: none;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 10;
+        }
+      }
+    }
+    &.loading {
+      border: 1px solid rgba(0, 0, 0, .04);
+      cursor: default;
+      &::after { 
+        content: url(${IconLoadingRed});
+        height: 14px;
+        width: 14px;
+        display: inline-block;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 10;
+      }
+    }
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+      background-color: var(--pri-clr-bg);
+    }
+  }
+`
+const trancateCSS = css`
+  .truncate-overflow {
+    position: relative;
+    max-height: calc(16 * 3)px;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-all;
+    line-height: 16px;
+    p { 
+      line-height: 16px; 
+    }
+  }
+`
+
+const getTablePopupWrapperModifiedStyled = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'image-listing') {
+    style += `
+      padding: 12px 12px 12px 12px;
+      overflow: visible;
+      max-width: 452px;
+      .table-image-figure {
+        &.edit, &.add, &.loading {
+          width: 46.5px;
+          height: 46.5px;
+        }
+      }
+      .image-list {
+        max-width: 452px;
+        grid-gap: 8px;
+        grid-template-columns: repeat(3,46.5px);
+        grid-template-rows: repeat(3,auto);
+      }
+      @media only screen and (min-width: 768px) {
+        .image-list {
+          grid-template-columns: repeat(8, 46.5px);
+          grid-auto-flow: unset;
+          grid-template-rows: auto;
+        }
+    
+      }
+    `
+  }
+  return style
+}
+const getCustomWrapperModifiedStyled = ({ $isExpand, $isEditable }:{ $isExpand?: boolean, $isEditable?: boolean }) => {
+  let style = ``
+  if ($isExpand) {
+    style += `
+      & ${CategoryByLabelContainer} {
+        padding-bottom: 8px;
+      }
+    `
+  }
+  if ($isEditable === false) {
+      style += `
+        grid-gap: 4px;
+        padding-left: 4px;
+        padding-top: 6px;
+      `
+  }
+  return style
+}
+const getFieldContainerModifiedStyled = ({ $isVariant, $isTotal }:{ $isVariant: boolean, $isTotal: number }) => {
+  if ($isVariant) {
+    return`
+      padding: 12px !important;
+      border-bottom: 1px solid #e3e3e3;
+      & ${FieldWrapper} {
+        grid-template-columns: 90px repeat(${$isTotal ? $isTotal : 4}, 114px);
+        > aside {
+          padding-left: 0;
+        }
+      }
+    `
+  }
+  else {
+    return `
+      padding-bottom: 8px;
+      ${FieldWrapper} {
+        grid-template-columns: repeat(4,150px);
+      }
+    `
+  }
+}
+const getMasterTableViewportModifiedStyled = ({ $mode }:{ $mode?: string }) => {
+  let style = ``
+  if ($mode === 'edit-master' || $mode === 'create-listing' || $mode==='edit-listing') {
+    style += `
+      height: calc(100vh - 120px);
+      @media only screen and (min-width: 768px) {
+        height: calc(100vh - 70px);
+      }
+    `
+    if ($mode === 'create-listing' || $mode === 'edit-listing') {
+      style += `
+        ${MasterTableBodyContent} .cell-colGroup {
+          &, > div {
+            min-height: 122px;
+          }
+          .cell-uneditable {
+            min-width: 449px;
+          }
+        }
+      `
+    } 
+  } else if($mode === 'create-inbound' || $mode === 'create-outbound' || $mode === 'create-adjustment') {
+    style += `
+      height: calc(100vh - 164px - 367px);
+      @media only screen and (min-width: 768px) {
+        height: calc(100vh - 70px - 239px);
+      }
+      @media only screen and (min-width: 1024px) {
+        height: calc(100vh - 70px - 180px);
+      }
+    `
+  } else if($mode === 'create-transfer') {
+    style += `
+      height: calc(100vh - 120px - 426px);
+      @media only screen and (min-width: 768px) {
+        height: calc(100vh - 76px - 249px);
+      }
+      @media only screen and (min-width: 1024px) {
+        height: calc(100vh - 76px - 180px);
+      }
+    `
+  }
+  return style
+}
+const getMasterTableBodyContentModifiedStyled = ({ $mode }:{ $mode?: string}) => {
+  let style = ``
+  if($mode === 'create-transfer' || $mode === 'confirm-inbound' || $mode === 'confirm-outbound' || $mode === 'confirm-adjustment') {
+      style +=`
+      > div {
+        min-height: 66px;
+        &.cell-colGroup {
+          > div { 
+            min-height: 66px; 
+          }
+        }
+        &.cell-rowGroup {
+          .cell-row {
+            &, > div { 
+              min-height: 66px; 
+            }
+          }
+        }
+        .cell {
+          &-label {
+            &:not([data-key="item"]) {
+              > span, .cell-wrapper {
+                padding-top: 6px;
+              }
+            }
+          }
+          &-trash {
+            > article, >div {
+              padding-top: 6px;
+            }
+          }
+          &-checkbox {
+            padding-top: 22px;
+          }
+        }
+      }
+    `
+  } else if($mode === 'create-return') {
+    style +=`
+      > div {
+        .cell {
+          &-label {
+            &:not([data-key="item"]) {
+              > span, .cell-wrapper {
+                padding-top: 6px;
+              }
+            }
+          }
+          &-trash {
+            > article, >div {
+              padding-top: 6px;
+            }
+          }
+          &-checkbox {
+            padding-top: 22px;
+          }
+        }
+      }
+    `
+  } else if($mode === 'create-price') {
+    style +=`
+      > div {
+        min-height: 100px;
+        &.cell-colGroup {
+          > div { 
+            min-height: 100px; 
+          }
+        }
+        &.cell-rowGroup {
+          .cell-row {
+            &, 
+            > div { 
+              min-height: 100px; 
+            }
+          }
+        }
+      }
+      ._refErrorContainer {
+        ${thirdElipsis}
+      }
+    `
+  } else if($mode === 'create-adjustment' || $mode === 'create-outbound') {
+    style +=` 
+      > div {
+        min-height: 90px;
+        &.cell-colGroup {
+          > div { 
+            min-height: 90px; 
+          }
+        }
+        &.cell-rowGroup {
+          .cell-row {
+            &, 
+            > div { 
+              min-height: 90px; 
+            }
+          }
+        }
+      }
+    `
+  }
+  return style
+}
+
+export const MasterTable = styled.section`
+  position: relative;
+`
+export const MasterTableWrapper = styled.article`
+  display: inline-block;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+`
+export const MasterTableViewport = styled.section<{ $mode?: string }>`
+  display: inline-block;
+  width: 100vw;
+  height: calc(100vh - 220px);
+  position: relative;
+  overflow: auto;
+  transition: all 1s ease;
+  @media only screen and (min-width: 768px) {
+    height: calc(100vh - 140px);
+  }
+  ${getMasterTableViewportModifiedStyled}
+`
+export const MasterTableCanvas = styled.article`
+  display: inline-grid;
+  grid-auto-flow: row;
+  padding-bottom: 1px;
+  min-width: 100vw;
+`
+export const MasterTableHeaderWrapper = styled.section`
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  z-index: 99;
+  line-height: 7px;
+  transition: left 0s linear;
+  visibility: hidden;
+  > section > div {
+    ${divHeaderCell}
+    & >header {
+      position: absolute;
+      top: 50% !important;
+      transform: translateY(-50%);
+      left: 10px;
+      & img, & .initial-wrapper {
+        position: absolute;
+        left: 0;
+        top: -4px;
+      }
+    }
+  }
+  .headerCell-Checkbox > label{
+    position: absolute;
+    top: 50%; 
+    left: 20px;
+  }
+  .headerCell-img {
+    & >header {
+      padding-left: 30px;
+    }
+  }
+  &._refMasterTableHeaderClone {
+    position: fixed; 
+    z-index: 100;
+    background-color: var(--pri-clr-bg);
+    visibility: visible;
+    min-width: 100%;
+    overflow-y: hidden;
+  }
+`
+export const MasterTableHeaderContainer = styled.section`
+  display: inline-block;
+  width: 100%;
+  height: 50px;
+  overflow-y: hidden;
+  background-color: var(--ter-clr-bg);
+  line-height: 50px;
+  i[name='question'] {
+    display: inline-block;
+    margin-left: 2px;
+    position: relative;
+    top: 2px;
+  }
+`
+export const MasterTableBodyWrapper = styled.section`
+  display: inline-grid;
+  grid-auto-flow: row;
+  height: 100%;
+  align-content: start;
+`
+export const MasterTableBodyContent = styled.article<{ $mode?: string }>`
+  position: relative;
+  border-bottom: 1px solid var(--tab-clr-ln);
+  ${commonCSSLists}
+  ${trancateCSS}
+  &.is-highlighted, &.is-fullfilled {
+    background-color: rgba(232, 255, 237, .7);
+    .cell-rowGroup {
+      .cell-row {
+        .cell {
+          &, &-disabled { 
+            background-color: transparent; 
+          }
+        }
+      }
+    }
+    .cell-colGroup {
+      .cell {
+        &, &-uneditable { 
+          background-color: transparent; 
+        }
+        &-disabled {
+          background-color: rgb(250, 250, 250);
+          &, .cell-wrapper { 
+            cursor: default; 
+          }
+        }
+        &-label[data-key='promotionPrice'] {
+          background-color: transparent; 
+        }
+      }
+    }
+  }
+  > div {
+    ${divCell}
+  }
+  .custom-error {
+    ${errrorLists}
+  }
+  .cell {
+    > div:not(.truncate-overflow) {
+      ${elipsis}
+      height: 100%;
+      &.master-editor { 
+        overflow: unset; 
+      }
+    }
+    &.cell-trash { 
+      > div {
+        width: 100%;
+        display: inline-grid;
+        justify-content: center;
+      }
+    }
+    &:not(.cell-checkbox) {
+      > article, > section {
+        overflow-y: hidden;
+      }
+    }
+    > article, > section {
+      height: 100%;
+      position: relative;
+    }
+    > section {
+      &.master-editor { 
+        overflow: unset; 
+      }
+      > div {
+        overflow-wrap: break-word;
+        &:empty {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+    &-tag {
+      span {
+        background-color: hsl(0,0%,90%);
+        border-radius: 2px;
+        display: flex;
+        margin: 2px;
+        min-width: 0;
+        padding: 3px 4px;
+        padding-left: 6px;
+        float: left;
+        font-size: 12px;
+      }
+    }
+    &-select { 
+      text-transform: capitalize; 
+    }
+    &-editing {
+      input, textarea, .table-image-figure {
+        border: 1px solid var(--pri-clr-ln__fc) !important;
+      }
+      ._refContainer  > div > div {
+        border-color: var(--pri-clr-ln__fc);
+        border-width: 1px;
+        input { border: none  !important; }
+      }
+    }
+    &-error {
+      &:not(.cell-custom_select):not(.cell-custom_input) {
+        ${errrorLists}
+      }
+    }
+    &-uneditable { 
+      background-color: rgb(250, 250, 250); 
+    }
+    &-label { 
+      cursor: default !important; 
+    }
+    &-switch { 
+      text-align: center; 
+    }
+    .cell-wrapper {
+      .is-less {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+      }
+      ._refCustomContainer {
+        min-height: 32px;
+        ._refLoadingfield {
+          min-height: 32px;
+          display: inline-block;
+          width: 100%;
+        }
+      }
+    }
+    &:not(.cell-custom_select):not(.cell-custom_input):not(.cell-label):not(.cell-checkbox)  {
+      .cell-wrapper {
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 16px 10px 10px;
+      }
+    }
+  }
+  .cell-colGroup {
+    padding: 0;
+    border-right: 0;
+    line-height: 0;
+    > div {
+      ${divCell}
+      &:first-child {
+        > div {
+          display: grid;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .cell-rowGroup {
+    ${divCellReset}
+    position: absolute; 
+    top: 0;
+    display: inline-grid;
+    grid-auto-flow: row;
+    .cell-row {
+      position: relative;
+      border-bottom: 1px solid var(--tab-clr-ln);
+      min-height: 82px;
+      &:last-child { 
+        border-bottom: 0; 
+      }
+      > div {
+        ${divCell}
+      }
+      .cell-disabled {
+        background-color: rgb(250, 250, 250);
+        border-bottom: 1px solid var(--tab-clr-ln);
+        &, .cell-wrapper { 
+          cursor: default; 
+        }
+      }
+    }
+  }
+  .cell-checkbox {
+    &:not(.isChecked):hover , &.isChecked {
+      article > div {
+        &:first-child { 
+          display: none; 
+        }
+        &:last-child { 
+          display: block !important; 
+        }
+      }
+    }
+    > article {
+      overflow-y: unset;
+    }
+    article > div {
+      text-align: center;
+      &:first-child {
+        display: grid;
+        z-index: 10;
+        position: relative;
+      }
+      &:last-child {
+        display: none !important;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        margin-left: -7px;
+        z-index: 1;
+        span { 
+          top: 0; 
+        }
+      }
+    }
+  }
+  .cell-custom_select, .cell-custom_input {
+    textarea {
+      resize: none;
+      min-height: 200px;
+      max-height: 200px;
+    }
+    div[class*="-placeholder"] { 
+      font-size: 13px; 
+    }
+  }
+  textarea {
+    resize: auto;
+    min-height: 50px;
+  }
+  input, textarea { 
+    padding: 8px; 
+  }
+  .popup-editor {
+    position: fixed;
+    z-index: 99;
+    & , &-overlay {
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    &-overlay {
+      position: absolute;
+      z-index: 1;
+      background-color: var(--ov-clr-bg);
+    }
+    &-content {
+      background: #fff;
+      top: 50%;
+      left: 50%;
+      position: relative;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      &.ck-editor-wrapper {
+        width: 500px;
+        height: 400px;
+      }
+    }
+    &-header {
+      background-color: var(--pri-clr-bg);
+      border-bottom: 1px solid var(--sec-clr-ln);
+      h3 {
+        font-size: 20px;
+        padding: 11px 30px;
+        color: var(---hd-clr);
+      }
+      button[mode="round-close"] {
+        position: absolute;
+        top: 16px;
+        right: 20px;
+      }
+    }
+  }
+  ${getMasterTableBodyContentModifiedStyled}
+`
+export const TablePopupWrapper = styled.section<{ $mode?: string }>`
+  overflow: hidden;
+  ${commonCSSLists}
+  .ck-editor__editable {
+    min-height: 200px;
+    max-height: 200px;
+  }
+  .image-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: inline-grid;
+    width: 100%;
+    grid-auto-flow: column;
+    grid-gap: 12px;
+    justify-content: left;
+    grid-template-columns: repeat(3,70px);
+    grid-template-rows: repeat(3,auto);
+    li {
+      position: relative;
+      .remove {
+        font-style: normal;
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        background: #000;
+        color: var(--sec-clr);
+        border-radius: 50%;
+        width: 14px;
+        height: 14px;
+        padding: 3px 5px;
+        font-weight: 600;
+        font-size: 7px;
+        z-index: 1;
+        cursor: pointer;
+      }
+      aside {
+        font-size: 11px;
+        line-height: 15px;
+        letter-spacing: 0.6px;
+        padding-top: 6px;
+        text-align: center;
+        max-height: 36px;
+        overflow: hidden;
+      }
+      > input { 
+        display: none;  
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    .image-list {
+      grid-template-rows: none;
+      grid-template-columns: repeat(auto-fill, 70px);
+    }
+  }
+  ${getTablePopupWrapperModifiedStyled}
+`
+export const BulkEditContainer = styled.section<{ $mode?: string }>`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 10px;
+  align-content: start;
+  margin-bottom: 1em;
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'switch') {
+      return css` 
+        grid-auto-flow: column;
+      `
+    }
+  }}
+`
+export const LabelContainer = styled.article`
+  display: inline-grid;
+  width: 100%;
+  grid-auto-flow: column;
+  grid-template-columns: max-content auto;
+  grid-gap: 10px;
+  align-items: center;
+`
+export const ProductByLabelContainer = styled.div`
+  display: inline-grid;
+  width: 100%;
+  grid-auto-flow: row;
+  grid-gap: 6px;
+  > section {
+    display: grid;
+    &:first-child {
+      grid-auto-flow: column;
+      grid-template-columns: 56px auto;
+      grid-gap: 10px;
+    }
+    &:last-child {
+      grid-auto-flow: row;
+      grid-gap: 2px;
+      font-size: 13px;
+    }
+    .counter-product-label {
+      display: inline-block;
+      width: auto;
+      margin-top: 4px;
+      background: #EBEBEB;
+      border-radius: var(--sec-rd);
+      padding: 2px 10px;
+      color: var(--mt-clr);
+      font-size: 12px;
+      line-height: 13px;
+    }
+  }
+`
+export const ProductByLabelName = styled.div`
+  height: auto;
+  max-height: 34px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  @supports (-webkit-line-clamp: 2) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: initial;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+`
+export const ActionByLabelContainer = styled.article<{ $mode?: string }>`
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'add') {
+      return css` 
+        div {
+          position: relative;
+          cursor: pointer;
+          text-align: center;
+        }
+      `
+    }
+  }}
+`
+export const CategoryByLabelContainer = styled.article<{ $mode?: string }>`
+  display: inline-grid;
+  position: relative;
+  width: 100%;
+  &, .ck.ck-editor, .rc-cascader, &._refCategoryContainer > div {
+    &:not([mode="image"]) {
+      width: 429px !important;
+    }
+  }
+  .ck-editor__editable {
+    min-height: 200px;
+    max-height: 200px;
+  }
+  input + i {
+    position: absolute;
+    right: 9px;
+    top: 29px;
+    z-index: 1;
+    ::before {
+      fill: #c7c7cc;
+      color:  #c7c7cc;
+      opacity: .5;
+    }
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'image') {
+      return css` 
+        width: 100% !important; 
+      `
+    }
+  }}
+`
+export const CustomWrapper = styled.div<{ $isExpand?: boolean, $isEditable?: boolean }>`
+  display: inline-grid;
+  width: auto;
+  grid-auto-flow: row;
+  grid-gap: 10px;
+  input, textarea { box-shadow: none; }
+  ${getCustomWrapperModifiedStyled}
+`
+export const CustomBox = styled.div`
+  width: 429px;
+  display: block;
+`
+export const CustomWrapperTitle = styled.aside`
+  margin-bottom: 6px;
+  padding: 0 6px;
+  position: relative;
+  ${formLabel}
+  &::first-letter { 
+    text-transform: uppercase; 
+  }
+`
+export const CustomWrapperTitleSub = styled.i`
+  font-weight: 400;
+  font-style: normal;
+`
+export const CustomRadioWrapper  = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: max-content;
+  grid-gap: 15px;
+`
+export const FieldContainer = styled.section<{ $isVariant: boolean, $isTotal: number }>`
+  display: inline-grid;
+  width: 100%;
+  grid-auto-flow: row;
+  grid-gap:8px;
+  font-size: 13px;
+  ${getFieldContainerModifiedStyled}
+`
+export const FieldWrapper = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 110px auto;
+  grid-gap:10px;
+  align-items: baseline;
+  justify-content: start;
+`  
+export const IsMassContainer = styled.div`
+  grid-gap: 12px !important;
+  > a {
+    position: relative;
+    font-weight: 400;
+    font-size: 13px;
+    &:after {
+      content: '|';
+      right: -8px;
+      position: absolute;
+    }
+    &:last-child {
+      &:after {
+        display: none; 
+      }
+    }
+  }
+`
+export const StoreContainer = styled.div`
+  display: inline-grid;
+  width: 100%;
+  grid-auto-flow: row;
+  grid-gap: 6px;
+  > section {
+    display: grid;
+    &:first-child {
+      grid-auto-flow: column;
+      grid-template-columns: 30px auto;
+      grid-gap: 10px;
+    }
+    &:last-child {
+      grid-auto-flow: row;
+      grid-gap: 10px;
+      font-size: 13px;
+    }
+  }
+`
+export const AdjustedLabel = styled.span`
+  display: inline-block;
+  font-weight: 600;
+  margin-top: 5px;
+  width: 100%;
+`
+export const InfoLabel = styled.span`
+  display: flex;
+  margin-top: 5px;
+  font-size: 12px;
+  text-wrap: wrap;
+  word-wrap: break-word;
+`