@byeolnaerim/flex-layout 0.0.6 → 0.0.7

package/dist/components.css

@@ -1,471 +0,0 @@
-/* src/flex-layout/styles/FlexLayout.module.css */
-.flex-layout {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  overflow-wrap: revert;
-  position: relative;
-  &[data-direction=column] {
-    flex-direction: column;
-    & > .flex-resize-panel {
-      height: 4px;
-      width: auto;
-      cursor: ns-resize;
-      &:hover > .hover,
-      &:hover > .hover[data-is_hover],
-      &:active > .hover {
-        height: 3px;
-        width: 100%;
-      }
-    }
-    & > .flex-container > .flex-content-fit-wrapper {
-      width: 100%;
-      height: fit-content;
-      & > * {
-        width: 100%;
-        height: fit-content;
-      }
-    }
-  }
-  &[data-direction=row] {
-    flex-direction: row;
-    & > .flex-resize-panel {
-      width: 4px;
-      height: auto;
-      cursor: ew-resize;
-      &:hover > .hover,
-      &:hover > .hover[data-is_hover],
-      &:active > .hover {
-        width: 3px;
-        height: 100%;
-      }
-    }
-    & > .flex-container > .flex-content-fit-wrapper {
-      width: fit-content;
-      height: 100%;
-      & > * {
-        width: fit-content;
-        height: 100%;
-      }
-    }
-  }
-  & > .flex-container {
-    overflow: hidden;
-    box-sizing: border-box;
-    &[data-is_resize_panel=true] {
-      flex: 1 1 0%;
-    }
-    &[data-is_resize_panel=false] {
-      flex: 0 0 0%;
-    }
-    & > *:not(.flex-content-fit-wrapper) {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  & .flex-resize-panel {
-    background-color: rgb(115 115 115);
-    z-index: 1001;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 0 0 0.1%;
-    position: relative;
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    right: 0;
-    bottom: 0;
-    &:hover,
-    &:active {
-      animation-name: drag-panel-hover;
-      animation-fill-mode: forwards;
-      animation-direction: normal;
-      animation-duration: 0.3s;
-      animation-iteration-count: 1;
-      animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
-    }
-    &:hover > .hover,
-    &:hover > .hover[data-is_hover],
-    &:active > .hover {
-      background-color: #0066ffb5;
-      z-index: 3002;
-      position: absolute;
-      display: block;
-      opacity: 1;
-      visibility: inherit;
-      transition: all 1s;
-      animation-name: drag-panel-hover-highlight;
-      animation-fill-mode: forwards;
-      animation-direction: normal;
-      animation-duration: 0.3s;
-      animation-iteration-count: 1;
-      animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
-    }
-    & > .hover {
-      opacity: 0;
-      visibility: hidden;
-      transition: all 1s;
-    }
-    &.bottom-cylinder {
-      &::after {
-        border-bottom-left-radius: 15px;
-        border-bottom-right-radius: 15px;
-        bottom: 100%;
-      }
-    }
-    &.bottom-cylinder-reverse {
-      &::after {
-        border-top-left-radius: 15px;
-        border-top-right-radius: 15px;
-        bottom: 100%;
-      }
-    }
-    &.top-cylinder {
-      border-bottom-left-radius: 15px;
-      border-bottom-right-radius: 15px;
-    }
-    &.right-cylinder {
-      &::after {
-        border-top-right-radius: 15px;
-        border-bottom-right-radius: 15px;
-        left: 100%;
-      }
-    }
-    &.left-cylinder {
-      &::after {
-        right: 100%;
-      }
-    }
-    &.bottom-cylinder,
-    &.bottom-cylinder-reverse,
-    &.top-cylinder,
-    &.left-cylinder,
-    &.right-cylinder {
-      &::after {
-        background-color: hsla(0, 0%, 54%, 0.32);
-        content: " ";
-        position: absolute;
-        z-index: 3002;
-      }
-      &:hover,
-      &:hover::after,
-      &:active,
-      &:active::after {
-        background-color: rgb(0 102 255 / 45%);
-        transition: background-color 1s;
-      }
-    }
-    &.bottom-cylinder,
-    &.top-cylinder,
-    &.bottom-cylinder-reverse {
-      &::after {
-        height: 1.1rem;
-        width: 60%;
-      }
-      &:not(.bottom-cylinder-reverse)::after {
-        top: 0;
-      }
-    }
-    &.left-cylinder,
-    &.right-cylinder {
-      &::after {
-        width: 1.1rem;
-        height: 60%;
-      }
-    }
-  }
-}
-@keyframes drag-panel-hover {
-  0% {
-    background-color: #b1b1b1d6;
-  }
-  10% {
-    background-color: #b1b1b1ba;
-  }
-  20% {
-    background-color: #b1b1b194;
-  }
-  40% {
-    background-color: #b1b1b17d;
-  }
-  60% {
-    background-color: #b1b1b152;
-  }
-  80% {
-    background-color: #b1b1b130;
-  }
-  100% {
-    background-color: #b1b1b100;
-    animation-play-state: paused;
-  }
-}
-@keyframes drag-panel-hover-highlight {
-  0% {
-    opacity: 0;
-  }
-  10% {
-    opacity: 0.1;
-  }
-  20% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 0.4;
-  }
-  60% {
-    opacity: 0.6;
-  }
-  80% {
-    opacity: 0.8;
-  }
-  100% {
-    opacity: 1;
-    animation-play-state: paused;
-  }
-}
-.flex-split-screen {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  & .flex-split-screen-boundary-container {
-    position: absolute;
-    font-family: Arial, sans-serif;
-    transition: background-color 0.3s, border-color 0.3s;
-    color: #00acc1;
-    border: 2px dashed #00acc1;
-    border-radius: 10px;
-    background-color: #0014ff17;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    z-index: 9001;
-  }
-  & .flex-split-screen-drag-box-title-wrapper-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 2001;
-    background: #f0f0f0;
-  }
-  & .flex-split-screen-drag-box-title-wrapper {
-    html[data-color-scheme=dark] & {
-      background: #3c3c3c;
-      box-shadow: 0px 1px 20px 0px #1e1e1e;
-    }
-    html[data-color-scheme=light] & {
-      background: #edf1f5;
-      box-shadow: 0px 1px 20px 0px #e5e5e5;
-    }
-    scrollbar-width: initial;
-    scrollbar-color: initial;
-    display: flex;
-    justify-content: space-between;
-    transition:
-      background 0.3s,
-      color 0.3s,
-      box-shadow 0.3s;
-    position: relative;
-    border-bottom: 1px solid #e5e5e5;
-    & .flex-split-screen-drag-box-title-container {
-      display: flex;
-      width: 100%;
-      background: inherit;
-    }
-  }
-}
-.flex-split-screen-drag-box-title-item {
-  display: flex;
-  align-items: baseline;
-  padding-right: 0.5rem;
-  padding-left: 0.1rem;
-  &:last-child:not(:first-child) {
-    border-right: 2px solid #00000012;
-  }
-  &:not(.active) {
-    box-shadow: inset 0 0 20px 20px #00000000;
-    border-bottom: 1px solid #007fff40;
-  }
-  &:hover {
-    html[data-color-scheme=dark] & {
-      background: #494949;
-    }
-    html[data-color-scheme=light] & {
-      background: #e0e0e0;
-    }
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-  &:active {
-    box-shadow: inset 0px 0px 17px 0px #00000029;
-    transform: scale(0.97);
-  }
-  & button {
-    background: none;
-    border: none;
-    color: #bbbbbb;
-    font-weight: bold;
-    font-family: none;
-    font-size: 0.9rem;
-    cursor: pointer;
-    padding: 0 0.25rem;
-  }
-  &.active {
-    html[data-color-scheme=dark] & {
-      color: #b9af3a;
-    }
-    html[data-color-scheme=light] & {
-      color: #494300;
-    }
-    font-weight: bold;
-    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-    & button {
-      color: #5f5f5f;
-    }
-  }
-}
-.flex-split-screen-drag-box-title-more {
-  display: flex;
-  flex-direction: column;
-  line-height: 0.3;
-  padding: 0rem 0.65rem 0.5rem;
-  font-size: 1.2rem;
-  font-weight: bold;
-  border: none;
-  background: none;
-  color: black;
-  justify-content: space-evenly;
-  cursor: pointer;
-  background: inherit;
-  &:hover {
-    background: #797979;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-  &:active {
-    box-shadow: inset 0px 0px 17px 0px #00000029;
-    transform: scale(0.97);
-  }
-}
-.flex-split-screen-drag-box {
-  align-self: center;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-.flex-split-screen-drag-box-clone {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  display: flex;
-  background-color: #adadad;
-  flex-direction: column;
-  padding: 0.2rem 0.4rem;
-  border-radius: 7px;
-  line-height: 99%;
-  z-index: 9001;
-  & span:first-child {
-    font-weight: bold;
-    font-size: 0.85rem;
-  }
-  & span:last-child {
-    font-size: 0.75rem;
-  }
-}
-
-/* src/flex-layout/styles/listScroll.module.css */
-.default-scroll {
-  overflow: auto;
-}
-.list-scroll {
-  position: relative;
-  flex-wrap: nowrap;
-  text-wrap: nowrap;
-  white-space: nowrap;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable both-edges;
-  &.y {
-    overflow-y: scroll;
-    overflow-x: clip;
-    padding-left: 0.15rem;
-    padding-right: 0.4rem;
-    &:not(:hover) {
-      padding-right: 0.4rem;
-      padding-top: 0.4rem;
-    }
-    &:hover {
-      padding-right: 0;
-      padding-left: top;
-    }
-  }
-  &.x {
-    overflow-y: clip;
-    overflow-x: scroll;
-    padding-top: 0.15rem;
-    padding-bottom: 0.4rem;
-    &:not(:hover) {
-      padding-bottom: 0.4rem;
-      padding-left: 0.4rem;
-    }
-    &:hover {
-      padding-bottom: 0;
-      padding-left: 0;
-    }
-  }
-  &.none {
-    scrollbar-width: none !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  &.show-scroll::-webkit-scrollbar,
-  &:hover::-webkit-scrollbar {
-    scrollbar-width: thin;
-    display: initial;
-    width: 0.45rem;
-    height: 0.45rem;
-  }
-  &.show-scroll::-webkit-scrollbar-thumb,
-  &:hover::-webkit-scrollbar-thumb {
-    background: #222;
-    border-radius: 6px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
-    transition: background 0.3s ease, box-shadow 0.3s ease;
-  }
-  &.show-scroll::-webkit-scrollbar-thumb:hover,
-  &.show-scroll::-webkit-scrollbar-thumb:active,
-  &:hover::-webkit-scrollbar-thumb:hover {
-    background:
-      linear-gradient(
-        145deg,
-        #ffecec,
-        #f1f1f1);
-  }
-  &.show-scroll::-webkit-scrollbar-track,
-  &:hover::-webkit-scrollbar-track {
-    background:
-      linear-gradient(
-        145deg,
-        #989898,
-        #7c7c7c);
-    border-radius: 6px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-  }
-}
-/*# sourceMappingURL=components.css.map */

package/dist/components.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/flex-layout/styles/FlexLayout.module.css","../src/flex-layout/styles/listScroll.module.css"],"sourcesContent":[".flex-layout {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    overflow: auto;\n    overflow-wrap: revert;\n    position: relative;\n    /* -ms-overflow-style: none;\n    scrollbar-width: none; */\n    /* &::-webkit-scrollbar {\n        display: none;\n    } */\n    &[data-direction='column'] {\n        flex-direction: column;\n        & > .flex-resize-panel {\n            height: 4px;\n            width: auto;\n            cursor: ns-resize;\n            &:hover > .hover,\n            &:hover > .hover[data-is_hover],\n            &:active > .hover {\n                height: 3px;\n                width: 100%;\n            }\n        }\n        & > .flex-container > .flex-content-fit-wrapper {\n            width: 100%;\n            height: fit-content;\n            & > * {\n                width: 100%;\n                height: fit-content;\n            }\n        }\n    }\n\n    &[data-direction='row'] {\n        flex-direction: row;\n        & > .flex-resize-panel {\n            width: 4px;\n            height: auto;\n            cursor: ew-resize;\n            &:hover > .hover,\n            &:hover > .hover[data-is_hover],\n            &:active > .hover {\n                width: 3px;\n                height: 100%;\n            }\n        }\n        & > .flex-container > .flex-content-fit-wrapper {\n            width: fit-content;\n            height: 100%;\n            & > * {\n                width: fit-content;\n                height: 100%;\n            }\n        }\n    }\n    & > .flex-container {\n        overflow: hidden;\n        box-sizing: border-box;\n        &[data-is_resize_panel='true'] {\n            flex: 1 1 0%;\n        }\n        &[data-is_resize_panel='false'] {\n            flex: 0 0 0%;\n        }\n        & > *:not(.flex-content-fit-wrapper) {\n            width: 100%;\n            height: 100%;\n        }\n    }\n    & .flex-resize-panel {\n        background-color: rgb(115 115 115);\n        z-index: 1001;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex: 0 0 0.1%;\n        position: relative;\n        -moz-user-select: -moz-none;\n        -khtml-user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        right: 0;\n        bottom: 0;\n\n        &:hover,\n        &:active {\n            animation-name: drag-panel-hover;\n            animation-fill-mode: forwards;\n            animation-direction: normal;\n            animation-duration: 0.3s;\n            animation-iteration-count: 1;\n            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n        }\n\n        &:hover > .hover,\n        &:hover > .hover[data-is_hover],\n        &:active > .hover {\n            background-color: #0066ffb5;\n            z-index: 3002;\n            position: absolute;\n            display: block;\n            opacity: 1;\n            visibility: inherit;\n            transition: all 1s;\n            animation-name: drag-panel-hover-highlight;\n            animation-fill-mode: forwards;\n            animation-direction: normal;\n            animation-duration: 0.3s;\n            animation-iteration-count: 1;\n            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n        }\n\n        & > .hover {\n            opacity: 0;\n            visibility: hidden;\n            transition: all 1s;\n        }\n        &.bottom-cylinder {\n            &::after {\n                border-bottom-left-radius: 15px;\n                border-bottom-right-radius: 15px;\n                bottom: 100%;\n            }\n        }\n        &.bottom-cylinder-reverse {\n            &::after {\n                border-top-left-radius: 15px;\n                border-top-right-radius: 15px;\n                bottom: 100%;\n            }\n        }\n        &.top-cylinder {\n            border-bottom-left-radius: 15px;\n            border-bottom-right-radius: 15px;\n        }\n        &.right-cylinder {\n            &::after {\n                border-top-right-radius: 15px;\n                border-bottom-right-radius: 15px;\n                left: 100%;\n            }\n        }\n        &.left-cylinder {\n            &::after {\n                right: 100%;\n            }\n        }\n        &.bottom-cylinder,\n        &.bottom-cylinder-reverse,\n        &.top-cylinder,\n        &.left-cylinder,\n        &.right-cylinder {\n            &::after {\n                background-color: hsla(0, 0%, 54%, 0.32);\n                content: ' ';\n                position: absolute;\n                z-index: 3002;\n            }\n            &:hover,\n            &:hover::after,\n            &:active,\n            &:active::after {\n                background-color: rgb(0 102 255 / 45%);\n                transition: background-color 1s;\n            }\n        }\n        &.bottom-cylinder,\n        &.top-cylinder,\n        &.bottom-cylinder-reverse {\n            &::after {\n                height: 1.1rem;\n                width: 60%;\n            }\n            &:not(.bottom-cylinder-reverse)::after {\n                top: 0;\n            }\n        }\n        &.left-cylinder,\n        &.right-cylinder {\n            &::after {\n                width: 1.1rem;\n                height: 60%;\n            }\n        }\n    }\n}\n\n@keyframes drag-panel-hover {\n    0% {\n        background-color: #b1b1b1d6;\n    }\n\n    10% {\n        background-color: #b1b1b1ba;\n    }\n\n    20% {\n        background-color: #b1b1b194;\n    }\n\n    40% {\n        background-color: #b1b1b17d;\n    }\n\n    60% {\n        background-color: #b1b1b152;\n    }\n\n    80% {\n        background-color: #b1b1b130;\n    }\n\n    100% {\n        background-color: #b1b1b100;\n        animation-play-state: paused;\n    }\n}\n\n@keyframes drag-panel-hover-highlight {\n    0% {\n        opacity: 0;\n    }\n\n    10% {\n        opacity: 0.1;\n    }\n\n    20% {\n        opacity: 0.2;\n    }\n\n    40% {\n        opacity: 0.4;\n    }\n\n    60% {\n        opacity: 0.6;\n    }\n\n    80% {\n        opacity: 0.8;\n    }\n\n    100% {\n        opacity: 1;\n        animation-play-state: paused;\n    }\n}\n\n.flex-split-screen {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    & .flex-split-screen-boundary-container {\n        position: absolute;\n        font-family: Arial, sans-serif;\n        transition:\n            background-color 0.3s,\n            border-color 0.3s;\n        color: #00acc1;\n        border: 2px dashed #00acc1;\n        border-radius: 10px;\n        background-color: #0014ff17;\n        font-size: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: bold;\n        z-index: 9001;\n    }\n    & .flex-split-screen-drag-box-title-wrapper-sticky {\n        position: sticky;\n        top: 0;\n        z-index: 2001;\n        background: #f0f0f0;\n    }\n    & .flex-split-screen-drag-box-title-wrapper {\n        html[data-color-scheme='dark'] & {\n            background: #3c3c3c;\n            box-shadow: 0px 1px 20px 0px #1e1e1e;\n        }\n        html[data-color-scheme='light'] & {\n            background: #edf1f5;\n            box-shadow: 0px 1px 20px 0px #e5e5e5;\n        }\n        scrollbar-width: initial;\n        scrollbar-color: initial;\n        display: flex;\n        justify-content: space-between;\n        transition:\n            background 0.3s,\n            color 0.3s,\n            box-shadow 0.3s;\n        position: relative;\n        border-bottom: 1px solid #e5e5e5;\n        & .flex-split-screen-drag-box-title-container {\n            display: flex;\n            width: 100%;\n            background: inherit;\n        }\n    }\n}\n.flex-split-screen-drag-box-title-item {\n    display: flex;\n    align-items: baseline;\n    padding-right: 0.5rem;\n    padding-left: 0.1rem;\n    &:last-child:not(:first-child) {\n        border-right: 2px solid #00000012;\n    }\n    &:not(.active) {\n        box-shadow: inset 0 0 20px 20px #00000000;\n        border-bottom: 1px solid #007fff40;\n    }\n    &:hover {\n        html[data-color-scheme='dark'] & {\n            background: #494949;\n        }\n        html[data-color-scheme='light'] & {\n            background: #e0e0e0;\n        }\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    }\n    &:active {\n        box-shadow: inset 0px 0px 17px 0px #00000029;\n        transform: scale(0.97);\n    }\n    & button {\n        background: none;\n        border: none;\n        color: #bbbbbb;\n        font-weight: bold;\n        font-family: none;\n        font-size: 0.9rem;\n        cursor: pointer;\n        padding: 0 0.25rem;\n    }\n    &.active {\n        html[data-color-scheme='dark'] & {\n            color: #b9af3a;\n        }\n        html[data-color-scheme='light'] & {\n            color: #494300;\n        }\n        font-weight: bold;\n        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n        & button {\n            color: #5f5f5f;\n        }\n    }\n}\n.flex-split-screen-drag-box-title-more {\n    display: flex;\n    flex-direction: column;\n    line-height: 0.3;\n    padding: 0rem 0.65rem 0.5rem;\n    font-size: 1.2rem;\n    font-weight: bold;\n    border: none;\n    background: none;\n    color: black;\n    justify-content: space-evenly;\n    cursor: pointer;\n    background: inherit;\n    &:hover {\n        background: #797979;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    }\n    &:active {\n        box-shadow: inset 0px 0px 17px 0px #00000029;\n        transform: scale(0.97);\n    }\n}\n.flex-split-screen-drag-box {\n    align-self: center;\n    -webkit-touch-callout: none; /* iOS */\n    -webkit-user-select: none; /* Safari */\n    -khtml-user-select: none; /* Konqueror */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* IE 10+ */\n    user-select: none; /* Standard syntax */\n    /* pointer-events: none; */\n    -webkit-tap-highlight-color: transparent;\n    /* touch-action: none; */\n    -webkit-touch-callout: none;\n}\n.flex-split-screen-drag-box-clone {\n    -webkit-touch-callout: none; /* iOS */\n    -webkit-user-select: none; /* Safari */\n    -khtml-user-select: none; /* Konqueror */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* IE 10+ */\n    user-select: none; /* Standard syntax */\n    /* pointer-events: none; */\n    -webkit-tap-highlight-color: transparent;\n    /* touch-action: none; */\n    -webkit-touch-callout: none;\n\n    display: flex;\n    background-color: #adadad;\n    flex-direction: column;\n    padding: 0.2rem 0.4rem;\n    border-radius: 7px;\n    line-height: 99%;\n    z-index: 9001;\n    & span:first-child {\n        font-weight: bold;\n        font-size: 0.85rem;\n    }\n    & span:last-child {\n        font-size: 0.75rem;\n    }\n}\n",".default-scroll {\r\n    overflow: auto;\r\n}\r\n.list-scroll {\r\n    position: relative;\r\n    flex-wrap: nowrap;\r\n    text-wrap: nowrap;\r\n    white-space: nowrap;\r\n    scroll-snap-type: x mandatory;\r\n    scroll-behavior: smooth;\r\n    scrollbar-gutter: stable both-edges;\r\n    &.y {\r\n        overflow-y: scroll;\r\n        overflow-x: clip;\r\n        padding-left: 0.15rem;\r\n        padding-right: 0.4rem;\r\n        &:not(:hover) {\r\n            padding-right: 0.4rem;\r\n            padding-top: 0.4rem;\r\n        }\r\n        &:hover {\r\n            padding-right: 0;\r\n            padding-left: top;\r\n        }\r\n    }\r\n\r\n    &.x {\r\n        overflow-y: clip;\r\n        overflow-x: scroll;\r\n        padding-top: 0.15rem;\r\n        padding-bottom: 0.4rem;\r\n        &:not(:hover) {\r\n            padding-bottom: 0.4rem;\r\n            padding-left: 0.4rem;\r\n        }\r\n        &:hover {\r\n            padding-bottom: 0;\r\n            padding-left: 0;\r\n        }\r\n    }\r\n\r\n    &.none {\r\n        scrollbar-width: none !important;\r\n\r\n        &::-webkit-scrollbar {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar,\r\n    &:hover::-webkit-scrollbar {\r\n        scrollbar-width: thin;\r\n        display: initial;\r\n        width: 0.45rem;\r\n        height: 0.45rem;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-thumb,\r\n    &:hover::-webkit-scrollbar-thumb {\r\n        background: #222; /* 스크롤 위치 */\r\n        border-radius: 6px;\r\n        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* 입체감 있는 그림자 */\r\n        transition:\r\n            background 0.3s ease,\r\n            box-shadow 0.3s ease;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-thumb:hover,\r\n    &.show-scroll::-webkit-scrollbar-thumb:active,\r\n    &:hover::-webkit-scrollbar-thumb:hover {\r\n        background: linear-gradient(145deg, #ffecec, #f1f1f1);\r\n        /* 호버 시 밝아지는 효과 */\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-track,\r\n    &:hover::-webkit-scrollbar-track {\r\n        background: linear-gradient(145deg, #989898, #7c7c7c);\r\n        border-radius: 6px;\r\n        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* 트랙 내부에 부드러운 그림자 */\r\n    }\r\n}\r\n"],"mappings":"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","names":[]}