@geoinsight/react-components 1.1.1 → 1.1.3

package/dist/esm/index.css

@@ -1,964 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
-
-:root {
-  box-sizing: border-box;
-  font-family: Poppins;
-  font-size: var(--font-size-16);
-
-  --font-size-10: 10px;
-  --font-size-12: 12px;
-  --font-size-14: 14px;
-  --font-size-16: 16px;
-  --font-size-18: 18px;
-  --font-size-20: 20px;
-  --font-size-24: 24px;
-  --font-size-32: 32px;
-  --font-size-40: 40px;
-
-  --spacing-4: 0.25rem;
-  --spacing-8: 0.5rem;
-  --spacing-12: 0.75rem;
-  --spacing-16: 1rem;
-  --spacing-20: 1.25rem;
-  --spacing-24: 1.5rem;
-  --spacing-32: 2rem;
-  --spacing-40: 2.5rem;
-  --spacing-48: 3rem;
-  --spacing-64: 4rem;
-  --spacing-96: 6rem;
-  --spacing-128: 8rem;
-
-  --size-m: 12rem;
-
-  --color-black: #1d1d1d;
-  --color-white: #eee;
-
-  --color-neutral-200: #dedede;
-  --color-neutral-300: #c3c3c3;
-  --color-neutral-400: #afafaf;
-  --color-neutral-500: #818181;
-  --color-neutral-600: #6c6c6c;
-  --color-neutral-700: #403b3a;
-  --color-neutral-800: #201e1d;
-
-  /* --color-success: #20e52f;
-  --color-danger: #e52f20; */
-
-  --transition-bg-cubic-bezier: background-color 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-text-decoration-cubic-bezier: text-decoration 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-text-underline-offset-cubic-bezier: text-underline-offset 250ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-box-shadow-cubic-bezier: box-shadow 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-border-cubic-bezier: border 250ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-
-
-  --color-dark-base: #2e3440;
-  --color-dark-bright: #3b4252;
-  --color-dark-brighter: #434c5e;
-  --color-dark-brightest: #4c566a;
-
-  --color-light-base: #d8dee9;
-  --color-light-bright: #e5e9f0;
-  --color-light-brighter: #eceff4;
-
-  --color-primary-base: #8fbcbb;
-  --color-primary-bright: #88c0d0;
-  --color-primary-dark: #81a1c1;
-  --color-primary-darker: #5e81ac;
-
-  --color-danger: #bf616a;
-  --color-warning: #ebcb8b;
-  --color-success: #a3be8c;
-  --color-info: #b48ead;
-}
-
-[data-theme="dark"] {
-  --color-main-background: var(--color-dark-base);
-  --color-main-color: var(--color-light-base);
-  color: var(--color-main-color) !important;
-  background-color: var(--color-main-background) !important;
-}
-
-[data-theme="light"] {
-  --color-main-background: var(--color-light-base);
-  --color-main-color: var(--color-dark-base);
-  color: var(--color-main-color) !important;
-  background-color: var(--color-main-background) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: var(--color-main-color);
-    background-color: var(--color-main-background);
-  }
-}
-
-[data-palette="water"] {
-  --color-primary-100: #d6efff;
-  --color-primary-200: #ade0ff;
-  --color-primary-300: #85d0ff;
-  --color-primary-400: #5cc0ff;
-  --color-primary-500: #33b1ff;
-  --color-primary-600: #009eff;
-  --color-primary-700: #008ae0;
-  --color-primary-800: #0071b8;
-  --color-primary-900: #00588f;
-}
-
-[data-palette="earth"] {
-  --color-primary-100: #f6e3cb;
-  --color-primary-200: #edc897;
-  --color-primary-300: #eabe86;
-  --color-primary-400: #e3ac63;
-  --color-primary-500: #dd9940;
-  --color-primary-600: #ca8323;
-  --color-primary-700: #ad701f;
-  --color-primary-800: #8b5918;
-  --color-primary-900: #684312;
-}
-
-[data-palette="forest"] {
-  --color-primary-100: #bee8b0;
-  --color-primary-200: #a4df90;
-  --color-primary-300: #8ad671;
-  --color-primary-400: #70cd51;
-  --color-primary-500: #54b435;
-  --color-primary-600: #4a9e2e;
-  --color-primary-700: #3b7e25;
-  --color-primary-800: #2c5f1c;
-  --color-primary-900: #1e3f12;
-}
-
-h1 {
-  font-size: var(--font-size-40);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-h2 {
-  font-size: var(--font-size-32);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-h3 {
-  font-size: var(--font-size-24);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-h4 {
-  font-size: var(--font-size-20);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-h5 {
-  font-size: var(--font-size-18);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-h6 {
-  font-size: var(--font-size-16);
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-@media (max-width: 1385px) {
-  h1 {
-    font-size: var(--font-size-32);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h2 {
-    font-size: var(--font-size-24);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h3 {
-    font-size: var(--font-size-20);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h4 {
-    font-size: var(--font-size-18);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h5 {
-    font-size: var(--font-size-16);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h6 {
-    font-size: var(--font-size-14);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-  * {
-    font-size: var(--font-size-14);
-  }
-}
-
-@media (max-width: 600px) {
-  h1 {
-    font-size: var(--font-size-24);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h2 {
-    font-size: var(--font-size-20);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h3 {
-    font-size: var(--font-size-18);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h4 {
-    font-size: var(--font-size-16);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h5 {
-    font-size: var(--font-size-14);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  h6 {
-    font-size: var(--font-size-12);
-    font-weight: 700;
-    line-height: 1.25;
-  }
-  * {
-    font-size: var(--font-size-12);
-  }
-}
-
-.menu-button {
-  align-items: center;
-  background-color: var(--color-dark-bright);
-  border-radius: var(--spacing-8) var(--spacing-12) var(--spacing-12)
-    var(--spacing-8);
-  border: none;
-  color: var(--color-light-bright);
-  cursor: pointer;
-  display: flex;
-  gap: var(--spacing-8);
-  height: var(--spacing-40);
-  justify-content: flex-end;
-  padding: var(--spacing-4) var(--spacing-16);
-  margin: var(--spacing-4) 0;
-  text-decoration: none;
-}
-
-/* .menu-button > svg {
-  margin-bottom: 5px;
-} */
-
-.menu-button:disabled {
-  cursor: unset;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.menu-button:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-.menu-button-dropdown {
-  background-color: var(--color-dark-bright) !important;
-  padding-right: var(--spacing-16) !important;
-}
-
-.menu-button-nested {
-  background-color: var(--color-dark-brightest);
-  margin-left: var(--spacing-16);
-  padding-right: var(--spacing-40);
-}
-
-.menu-button-subnested {
-  background-color: var(--color-dark-brightest);
-  margin-left: var(--spacing-32);
-  padding-right: var(--spacing-40);
-}
-
-.menu-button-nested:hover {
-  background-color: var(--color-primary-dark) !important;
-}
-
-.menu-button-subnested:hover {
-  background-color: var(--color-primary-dark) !important;
-}
-
-.menu-button-is-link:hover {
-  background-color: var(--color-primary-dark) !important;
-  transition: var(--transition-bg-cubic-bezier);
-}
-
-.menu-button-dropdown:hover {
-  background-color: var(--color-primary-darker) !important;
-}
-
-.menu-button-is-selected {
-  background-color: var(--color-primary-darker);
-}
-
-.button,
-.link {
-  align-items: center;
-  border-radius: var(--spacing-32);
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  gap: var(--spacing-8);
-  font-size: var(--font-size-16);
-}
-
-[data-theme="dark"] .button {
-  color: var(--color-light-brighter);
-}
-
-.button:disabled {
-  cursor: unset;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.button:hover {
-  background-color: var(--color-primary-dark);
-  border: 3px solid var(--color-primary-dark);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-
-.button__primary {
-  background-color: var(--color-primary-bright);
-  border: 3px solid var(--color-primary-base);
-}
-
-.button__secondary,
-.link__secondary {
-  background-color: var(--color-main-background);
-  border: 3px solid var(--color-primary-base);
-  border-radius: var(--spacing-32);
-  text-decoration: unset;
-}
-
-.button__secondary:hover {
-  box-shadow: unset;
-  border: 3px solid var(--color-primary-base);
-}
-
-.button__icon {
-  background-color: var(--color-primary-bright);
-}
-
-.button__icon:hover {
-  border: unset;
-}
-
-.link__primary {
-  background-color: unset !important;
-  color: var(--color-primary-base) !important;
-  text-decoration: underline 1px var(--color-primary-base);
-  text-underline-offset: var(--spacing-4);
-}
-
-[data-theme="light"] .link__primary {
-  color: var(--color-primary-darker) !important;
-  text-decoration: underline 1px var(--color-primary-darker);
-}
-
-.link__primary:hover {
-  border: unset;
-  box-shadow: unset;
-  color: var(--color-primary-dark) !important;
-  text-decoration: underline 2px var(--color-primary-base);
-  text-underline-offset: calc(var(--spacing-8) * 0.75);
-  transition: var(--transition-color-cubic-bezier),
-    var(--transition-text-underline-offset-cubic-bezier);
-}
-
-.link__secondary:hover {
-  background-color: var(--color-primary-dark);
-  border: 3px solid var(--color-primary-base);
-  box-shadow: unset;
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-.link__icon {
-  background-color: unset !important;
-  color: var(--color-primary-base) !important;
-}
-
-.link > a {
-  text-decoration: inherit;
-  color: inherit;
-}
-
-.link__icon svg {
-  border: 2px solid transparent;
-  border-bottom: 2px solid var(--color-primary-base);
-  border-radius: 2px;
-  padding: var(--spacing-4);
-}
-
-[data-theme="light"] .link__icon {
-  color: var(--color-primary-darker) !important;
-}
-
-[data-theme="light"] .link__icon svg {
-  border-bottom: 2px solid var(--color-primary-darker);
-}
-
-.link__icon:hover {
-  border: unset;
-  box-shadow: unset;
-}
-
-.link__icon:hover svg {
-  color: var(--color-main-color) !important;
-  border: 2px solid var(--color-primary-dark);
-  transition: var(--transition-color-cubic-bezier), var(--transition-border-cubic-bezier);
-}
-
-.button__small {
-  padding: var(--spacing-4);
-}
-
-.button__medium {
-  padding: var(--spacing-8) var(--spacing-24);
-}
-
-.button__large {
-  padding: var(--spacing-16);
-}
-
-.button__icon.button__medium {
-  padding: var(--spacing-8) var(--spacing-12);
-}
-
-.form {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-32);
-  padding: var(--spacing-32) 0;
-}
-
-.form__message {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  gap: var(--spacing-16);
-}
-.input-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  position: relative;
-  width: 100%;
-}
-
-.input-subgroup {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  position: relative;
-  width: 100%;
-}
-
-.input {
-  box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
-  padding: var(--spacing-16) var(--spacing-24);
-  font-size: var(--font-size-16);
-  width: 100%;
-}
-
-[data-theme="dark"] .input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
-}
-
-[data-theme="light"] .input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
-}
-
-.input__header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.input__header--error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
-.input--icon {
-  padding: var(--spacing-16) var(--spacing-40);
-}
-
-.input__icon {
-  padding: var(--spacing-16) var(--spacing-16);
-  position: absolute;
-}
-
-.input__icon--right {
-  right: 0;
-}
-
-.input__icon--left {
-  left: 0;
-}
-
-.input:enabled:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-box-shadow-cubic-bezier);
-}
-
-.input:focus {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-box-shadow-cubic-bezier);
-  outline: none;
-}
-
-.input::placeholder {
-  color: color-mix(in srgb, var(--color-light-base) 0.5, transparent);
-}
-
-.input:disabled {
-  opacity: 0.5;
-}
-
-.input--error {
-  border: 3px solid var(--color-danger) !important;
-}
-
-.input--error:focus {
-  border: 3px solid var(--color-danger);
-  outline: none;
-}
-
-.custom-class-name {
-  background-color: cyan;
-  width: 94.5%;
-  padding: var(--spacing-16) var(--spacing-24);
-  font-size: var(--font-size-16);
-  border-radius: var(--spacing-8);
-}
-
-.special-label-class {
-  color: violet;
-  text-decoration: overline;
-}
-
-.textarea {
-  margin-bottom: var(--spacing-8);
-  position: relative;
-  width: 100%;
-}
-
-.textarea__header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.textarea__header--error {
-  font-size: 12px;
-  color: var(--color-danger);
-}
-
-.textarea__input {
-  box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
-  cursor: text;
-  outline: none;
-  padding: var(--spacing-8) var(--spacing-16);
-  resize: vertical;
-  width: 100%;
-}
-
-[data-theme="dark"] .textarea__input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
-}
-
-[data-theme="light"] .textarea__input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
-}
-
-[data-theme="dark"] .textarea__input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
-}
-
-[data-theme="light"] .textarea__input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
-}
-
-.textarea__input--error {
-  border: 3px solid var(--color-danger);
-}
-
-.textarea__input:enabled:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-box-shadow-cubic-bezier);
-}
-
-.textarea__input:focus {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-box-shadow-cubic-bezier);
-  outline: none;
-}
-
-.textarea__input:disabled {
-  opacity: 0.5;
-}
-
-.textarea__button.button {
-  border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
-  bottom: 0;
-  cursor: pointer;
-  left: 0;
-  padding: var(--spacing-4) var(--spacing-8);
-  position: absolute;
-  width: 100%;
-}
-
-.textarea__button--error {
-  background: var(--color-danger) !important;
-  border: 3px solid var(--color-danger) !important;
-}
-
-.textarea__button > svg {
-  color: var(--color-main-color);
-}
-
-.textarea__button:disabled {
-  cursor: unset;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.textarea__button--show {
-  background-color: var(--color-primary-dark) !important;
-  border: 2px solid var(--color-primary-dark) !important;
-}
-
-.custom-label {
-  color: red;
-  text-decoration: line-through;
-}
-
-.textarea__button--show.textarea__button--error {
-  background: var(--color-danger) !important;
-  border: 3px solid var(--color-danger) !important;
-}
-
-.select-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  position: relative;
-  width: 100%;
-}
-
-.select {
-  box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
-  padding: var(--spacing-16) var(--spacing-24);
-  font-size: var(--font-size-16);
-  width: 100%;
-}
-
-.select--focus {
-  border-radius:  var(--spacing-8) var(--spacing-8)   0 0 !important;
-}
-
-.select:focus {
-  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
-}
-
-.select:disabled {
-  opacity: 0.5;
-}
-
-.select__arrow.input__icon {
-  padding: 0;
-}
-
-.select__arrow-button.button {
-  background-color: unset;
-  border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
-  padding: 15px var(--spacing-24);
-}
-
-.select__arrow-button.button:hover {
-  background-color: var(--color-primary-dark);
-}
-
-.select__arrow-button--open.button {
-  border-bottom-right-radius:  0 !important;
-}
-
-.select__box {
-  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
-  box-sizing: border-box;
-  max-height: var(--size-m);
-  overflow: scroll;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 2;
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
-}
-
-.select__box::-webkit-scrollbar {
-  display: none; /* Safari and Chrome */
-}
-
-.select__option.button {
-  border: none;
-  border-radius: 0;
-  text-align: left;
-  width: 100%;
-}
-
-.select__option.button:hover {
-  border: unset;
-}
-
-.select__option.button:last-child {
-  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
-}
-
-.select--error {
-  border: 3px solid var(--color-danger);
-}
-
-.select--error:focus {
-  border: 3px solid var(--color-danger);
-  outline: none;
-}
-
-.custom-class-name-group {
-  background-color: blue;
-  padding: var(--spacing-8);
-}
-
-.loading {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  position: relative;
-}
-
-.loading-message {
-  color: white;
-}
-
-.modal-overlay {
-  background: rgba(0, 0, 0, 0.3);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.modal {
-  background: white;
-  border-radius: var(--spacing-8);
-  border: 1px solid var(--color-neutral-600);
-  color: var(--color-black);
-  left: 50%;
-  padding: var(--spacing-4) var(--spacing-4);
-  position: absolute;
-  right: var(--spacing-16);
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5;
-}
-
-.modal__close {
-  position: absolute;
-  right: calc(var(--spacing-16) * -1);
-  top: calc(var(--spacing-16) * -1);
-  z-index: 5;
-}
-
-.modal__content {
-  border: 1px solid var(--color-neutral-100);
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: 0 var(--spacing-16);
-}
-
-.modal__footer {
-  padding-bottom: var(--spacing-16);
-}
-
-.range {
-  align-items: center;
-  display: flex;
-  position: relative;
-  min-width: 20rem;
-  gap: var(--spacing-16);
-}
-
-.range__panel:hover {
-  border-radius: var(--spacing-8);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-.range__panel {
-  display: flex;
-  position: relative;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.range__track {
-  background-color: var(--color-primary-bright);
-  border-radius: 0 var(--spacing-4) var(--spacing-4) 0;
-  height: 100%;
-  position: absolute;
-  z-index: 0;
-}
-
-.range__content {
-  align-items: start;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  width: var(--spacing-40);
-  z-index: 3;
-}
-
-.range__content:hover {
-  box-shadow: 5px 2px 6px 0 var(--color-main-color);
-  transition: var(--transition-box-shadow-cubic-bezier);
-}
-
-.range__content__period {
-  gap: 0;
-  width: var(--spacing-8);
-}
-
-.range__tick {
-  border-left: 2px solid
-    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
-  width: 100%;
-}
-
-.range__tick__large {
-  height: 1rem;
-}
-
-.range__tick__small {
-  height: 0.5rem;
-}
-
-.range__value {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: calc(80%);
-}
-
-.range__value__period {
-  border-left: 2px solid
-    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
-  width: calc(100% + var(--spacing-40));
-}
-
-.range__value--over {
-  background-color: var(--color-main-background) !important;
-  overflow: visible;
-  white-space: unset;
-  width: unset;
-  position: absolute;
-  top: calc(var(--spacing-40) * 1);
-}
-
-.range__thumb {
-  position: absolute;
-  top: -32px;
-  background-color: transparent;
-}
-
-.button__icon.range__play {
-  background-color: var(--color-main-background);
-  border: 1px solid var(--color-primary-dark);
-  border-radius: var(--spacing-32);
-  z-index: 5;
-}
-
-.button__icon.range__play:hover {
-  border: 1px solid var(--color-primary-dark);
-}
-
-@media (max-width: 699px) {
-  .range {
-    flex-direction: column;
-  }
-  .range__panel {
-    min-width: none;
-    max-width: 30rem;
-  }
-}
-
-@media (max-width: 500px) {
-  .range__panel {
-    min-width: none;
-    max-width: 20rem;
-  }
-}