{"version":3,"sourceRoot":"","sources":["../../../src/v1/scss"],"names":[],"mappings":"AAAA,MAEE,0CACA,uBACA,uBACA,4DAEA,uBACA,gCACA,yBACA,iCAEA,2BACA,6BACA,0CAEA,6BACA,2BACA,iCAGA,yEACA,mDACA,8CACA,gDACA,6BACA,6CACA,0BACA,0CAEA,+BACA,+BACA,6BAEA,qBACA,+BACA,wBACA,yBACA,+BACA,yBACA,gCACA,wBACA,6BACA,2BACA,wCAEA,2BACA,0BACA,gCAGA,wBACA,yBACA,yBACA,wCACA,2BACA,yBACA,+BAGA,0BACA,6BACA,4BACA,iCACA,2BAKF,kBACE,eACA,aACA,0BACA,0BACA,8BACA,oBAGA,uBACE,2BACA,uBAGF,wBACE,4BACA,qBAGF,yBACE,SACA,2BACA,mBAIF,sBACE,sBACA,0BAGE,oCACE,4BAGF,mCACE,4BAKN,yBACE,8BACA,6BAGE,uCACE,2BAGF,sCACE,2BAKN,0BACE,kBACA,wCACA,+BACA,gDACA,0CACA,8BACA,kCACA,sCACA,WACA,oBACA,oCACA,UAEA,kCACE,WACA,YACA,kBACA,iBACA,WACA,mBAGF,iCACE,kBACA,UACA,aACA,yBACA,YACA,mCACA,eACA,cACA,gCACA,UACA,SAEA,uCACE,sCAIJ,oCACE,eAGF,0CACE,mEAIF,gCACE,UAGF,+BACE,UACA,wBAGF,+BACE,UAON,gBACE,eACA,QACA,iCACA,aACA,yBACA,uBACA,aACA,oCACA,6CAEA,uBACE,+BACA,oBAGF,+BACE,eACA,MACA,QACA,gCACA,kCACA,wCACA,+CACA,kDACA,0CACA,6CACA,2CACA,4CACA,aACA,sBACA,oCACA,2BACA,yCAEA,oCACE,yBAGF,uCACE,aACA,8BACA,mBAGF,wCACE,aAEA,+CACE,gBACA,YACA,kCACA,+BACA,eACA,mDACE,mBACA,aAEF,qDACE,qCAKN,qCACE,OACA,gBACA,aACA,sBACA,SACA,qBACA,mCAEA,wDACE,UAGF,8DACE,gBACA,kBAIJ,qCACE,aACA,8BACA,uBACA,sCACA,6BACA,uCACA,kCACA,8CACA,iBACA,iDACA,wBACA,sCAEA,6CACE,WACA,YACA,cACA,kBACA,sBACA,2BACA,kBAGF,4CACE,6CACA,6CAGF,8CACE,UACA,4BACA,+BAGF,+CACE,eAGF,qDACE,yDAGF,8CACE,YACA,aACA,sBAGF,4CACE,iBACA,qBAGF,8CACE,iBAGF,mDACE,gBACA,YACA,kBACA,cACA,8BACA,eACA,eAEA,yDACE,oCAOV,yBACE,eACE,gBACA,YACA,uBAEA,uBACE,0CAGF,4CAEE,2CACA,6CAON,aACE,eACA,cACA,aACA,6BACA,8BACA,sCACA,8BACA,YACA,uCACA,8CACA,aACA,mBACA,uBACA,eACA,kCACA,iBACA,6CAEA,mBACE,4CAGF,oBACE,kBACA,MACA,QACA,+BACA,uCACA,+BACA,iCACA,oBACA,kCACA,+BACA,uCACA,iBACA,aACA,mBACA,uBACA,eACA,oBAEA,oCACE","sourcesContent":[":root {\n  // Notify\n  --notify-width: clamp(280px, 90vw, 400px);\n  --notify-spacing: 1rem;\n  --notify-z-index: 1000;\n  --notify-transition: opacity 0.3s ease, transform 0.3s ease;\n\n  --notify-padding: 1rem;\n  --notify-border-radius: 0.75rem;\n  --notify-font-size: 1rem;\n  --notify-font-family: sans-serif;\n\n  --notify-color-bg: #ffffff;\n  --notify-color-text: #333333;\n  --notify-color-shadow: rgba(0, 0, 0, 0.1);\n\n  --notify-close-size: 1.25rem;\n  --notify-close-color: #444;\n  --notify-close-color-hover: #000;\n\n  // Notif Center\n  --notif-center-remove-transition: opacity 0.3s ease, transform 0.3s ease;\n  --notif-center-bg-transition: background 0.2s ease;\n  --notif-center-transform: transform 0.3s ease;\n  --notif-center-width: clamp(300px, 90vw, 400px);\n  --notif-center-height: 100vh;\n  --notif-center-bg: rgba(255, 255, 255, 0.85);\n  --notif-center-blur: 12px;\n  --notif-center-shadow: rgba(0, 0, 0, 0.2);\n\n  --notif-center-x-padding: 1rem;\n  --notif-center-y-padding: 1rem;\n  --notif-center-z-index: 1050;\n\n  --notif-border: #000;\n  --notif-unread-border: #bd0b0b;\n  --notif-border-unread: ;\n  --notif-item-close: #666;\n  --notif-item-close-hover: #000;\n  --notif-item-bg: #ffffff;\n  --notif-item-unread-bg: #ffffff;\n  --notif-item-text: #222;\n  --notif-item-radius: 0.75rem;\n  --notif-item-padding: 1rem;\n  --notif-item-shadow: rgba(0, 0, 0, 0.1);\n\n  --notif-close-size: 1.5rem;\n  --notif-close-color: #444;\n  --notif-close-color-hover: #000;\n\n  // Bell\n  --notif-bell-size: 3rem;\n  --notif-bell-bg: #ffffff;\n  --notif-bell-color: #333;\n  --notif-bell-shadow: rgba(0, 0, 0, 0.2);\n  --notif-bell-z-index: 1040;\n  --notif-bell-radius: 50%;\n  --notif-bell-hover-bg: #f0f0f0;\n\n  // Badge\n  --notif-badge-bg: #d32f2f;\n  --notif-badge-color: #ffffff;\n  --notif-badge-size: 1.25rem;\n  --notif-badge-font-size: 0.75rem;\n  --notif-badge-border: none;\n}\n\n/* Notification container */\n\n.notify-container {\n  position: fixed;\n  display: flex;\n  gap: var(--notify-spacing);\n  width: var(--notify-width);\n  z-index: var(--notify-z-index);\n  pointer-events: none; // prevents click on container\n\n  // Horizontal position\n  &.left {\n    left: var(--notify-spacing);\n    align-items: flex-start;\n  }\n\n  &.right {\n    right: var(--notify-spacing);\n    align-items: flex-end;\n  }\n\n  &.center {\n    left: 50%;\n    transform: translateX(-50%);\n    align-items: center;\n  }\n\n  // Vertical position\n  &.top {\n    flex-direction: column;\n    top: var(--notify-spacing);\n\n    .notify {\n      &.enter {\n        transform: translateY(-10px); // vem de cima\n      }\n\n      &.exit {\n        transform: translateY(-10px); // sai para cima\n      }\n    }\n  }\n\n  &.bottom {\n    flex-direction: column-reverse;\n    bottom: var(--notify-spacing);\n\n    .notify {\n      &.enter {\n        transform: translateY(10px); // vem de baixo\n      }\n\n      &.exit {\n        transform: translateY(10px); // sai para baixo\n      }\n    }\n  }\n\n  .notify {\n    position: relative;\n    background-color: var(--notify-color-bg);\n    color: var(--notify-color-text);\n    box-shadow: 0 4px 8px var(--notify-color-shadow);\n    border-radius: var(--notify-border-radius);\n    padding: var(--notify-padding);\n    font-size: var(--notify-font-size);\n    font-family: var(--notify-font-family);\n    width: 100%;\n    pointer-events: auto; // allows individual click\n    transition: var(--notify-transition);\n    opacity: 1;\n\n    .avatar {\n      width: 2rem;\n      height: 2rem;\n      border-radius: 50%;\n      object-fit: cover;\n      float: left;\n      margin-right: 0.5rem;\n    }\n\n    .close {\n      position: absolute;\n      top: 0.5rem;\n      right: 0.75rem;\n      background: transparent;\n      border: none;\n      font-size: var(--notify-close-size);\n      cursor: pointer;\n      line-height: 1;\n      color: var(--notify-close-color);\n      padding: 0;\n      margin: 0;\n\n      &:hover {\n        color: var(--notify-close-color-hover);\n      }\n    }\n\n    &.clickable {\n      cursor: pointer;\n    }\n\n    &.clickable:hover {\n      background-color: var(--notify-color-bg-hover, rgba(0, 0, 0, 0.05));\n    }\n\n    // Input/output animations (optional)\n    &.enter {\n      opacity: 0;\n    }\n\n    &.show {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.exit {\n      opacity: 0;\n    }\n  }\n}\n\n/* Notification center */\n\n.notify-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.35);\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  padding: 1rem;\n  z-index: var(--notif-center-z-index);\n  transition: var(--notif-center-bg-transition);\n\n  &.hidden {\n    background-color: transparent;\n    pointer-events: none;\n  }\n\n  .notify-center {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--notif-center-width);\n    height: var(--notif-center-height);\n    background-color: var(--notif-center-bg);\n    backdrop-filter: blur(var(--notif-center-blur));\n    box-shadow: -4px 0 12px var(--notif-center-shadow);\n    padding-top: var(--notif-center-y-padding);\n    padding-bottom: var(--notif-center-y-padding);\n    padding-left: var(--notif-center-x-padding);\n    padding-right: var(--notif-center-x-padding);\n    display: flex;\n    flex-direction: column;\n    z-index: var(--notif-center-z-index);\n    transform: translateX(100%);\n    transition: var(--notif-center-transform);\n\n    &.open {\n      transform: translateX(0%);\n    }\n\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .options {\n      display: flex;\n\n      > button {\n        background: none;\n        border: none;\n        font-size: var(--notif-close-size);\n        color: var(--notif-close-color);\n        cursor: pointer;\n        > svg {\n          align-items: center;\n          display: flex;\n        }\n        &:hover {\n          color: var(--notif-close-color-hover);\n        }\n      }\n    }\n\n    .list {\n      flex: 1;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      scrollbar-width: thin;\n      scrollbar-color: #999 transparent;\n\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background: #aaa;\n        border-radius: 3px;\n      }\n    }\n\n    .item {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      background-color: var(--notif-item-bg);\n      color: var(--notif-item-text);\n      border-radius: var(--notif-item-radius);\n      padding: var(--notif-item-padding);\n      box-shadow: 0 2px 6px var(--notif-item-shadow);\n      font-size: 0.95rem;\n      transition: var(--notif-center-remove-transition);\n      border-left-style: solid;\n      border-left-color: var(--notif-border);\n\n      .avatar {\n        width: 40px;\n        height: 40px;\n        flex-shrink: 0;\n        border-radius: 50%;\n        background-size: cover;\n        background-position: center;\n        margin-right: 10px;\n      }\n\n      &.unread {\n        background-color: var(--notif-item-unread-bg);\n        border-left-color: var(--notif-unread-border);\n      }\n\n      &.removing {\n        opacity: 0;\n        transform: translateY(-10px);\n        pointer-events: none !important;\n      }\n\n      &.clickable {\n        cursor: pointer;\n      }\n\n      &.clickable:hover {\n        background-color: var(--notif-hover, rgba(0, 0, 0, 0.05));\n      }\n\n      .content {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .title {\n        font-weight: bold;\n        margin-bottom: 0.25rem;\n      }\n\n      .message {\n        font-size: 0.95rem;\n      }\n\n      .notify-close {\n        background: none;\n        border: none;\n        font-size: 1.25rem;\n        line-height: 1;\n        color: var(--notif-item-close);\n        cursor: pointer;\n        padding: 0.25rem;\n\n        &:hover {\n          color: var(--notif-item-close-hover);\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 600px) {\n  .notify-center {\n    border-radius: 0;\n    width: 100vw;\n    padding: 0px !important;\n\n    .header {\n      padding-top: var(--notif-center-y-padding);\n    }\n\n    .header,\n    .list {\n      padding-left: var(--notif-center-x-padding);\n      padding-right: var(--notif-center-x-padding);\n    }\n  }\n}\n\n/* Notification bell */\n\n.notify-bell {\n  position: fixed;\n  bottom: 1.5rem;\n  right: 1.5rem;\n  width: var(--notif-bell-size);\n  height: var(--notif-bell-size);\n  background-color: var(--notif-bell-bg);\n  color: var(--notif-bell-color);\n  border: none;\n  border-radius: var(--notif-bell-radius);\n  box-shadow: 0 4px 8px var(--notif-bell-shadow);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--notif-bell-z-index);\n  font-size: 1.4rem;\n  transition: var(--notif-center-bg-transition);\n\n  &:hover {\n    background-color: var(--notif-bell-hover-bg);\n  }\n\n  .badge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(25%, -25%);\n    background-color: var(--notif-badge-bg);\n    color: var(--notif-badge-color);\n    border: var(--notif-badge-border);\n    border-radius: 999px;\n    min-width: var(--notif-badge-size);\n    height: var(--notif-badge-size);\n    font-size: var(--notif-badge-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.3em;\n    pointer-events: none;\n\n    &[data-value='0'] {\n      display: none;\n    }\n  }\n}\n"]}