@use "sass:color";
z-input-text {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-text.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-text[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-text[required].hide-required > label:after {
    content: unset; }
  z-input-text.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-text.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-text > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-text > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-text > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-text > .container textarea, z-input-text > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
z-input-password {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-password.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-password[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-password[required].hide-required > label:after {
    content: unset; }
  z-input-password.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-password.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-password > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-password > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-password > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-password > .container textarea, z-input-password > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
  z-input-password > .container {
    position: relative;
    display: flex;
    align-items: center; }
    z-input-password > .container > i {
      position: absolute;
      right: 8px;
      cursor: pointer;
      padding: 4px; }
    z-input-password > .container > input {
      padding-right: 39px; }
z-input-checkbox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-checkbox.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-checkbox[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-checkbox[required].hide-required > label:after {
    content: unset; }
  z-input-checkbox.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-checkbox.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-checkbox > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-checkbox > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-checkbox > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-checkbox > .container textarea, z-input-checkbox > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
  z-input-checkbox[required] > .container > .text:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-checkbox.z-input-success > .container, z-input-checkbox.z-input-danger > .container {
    border: none !important; }
  z-input-checkbox > .container {
    display: flex;
    border: none;
    background: none; }
    z-input-checkbox > .container:hover {
      border: none; }
    z-input-checkbox > .container > input {
      min-width: 13px;
      width: 13px;
      height: 13px;
      margin-right: 8px;
      cursor: pointer; }
    z-input-checkbox > .container > .text {
      font-size: 14px;
      cursor: default;
      user-select: none;
      -webkit-user-select: none; }
z-input-number {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-number.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-number[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-number[required].hide-required > label:after {
    content: unset; }
  z-input-number.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-number.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-number > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-number > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-number > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-number > .container textarea, z-input-number > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
z-input-textarea {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-textarea.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-textarea[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-textarea[required].hide-required > label:after {
    content: unset; }
  z-input-textarea.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-textarea.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-textarea > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-textarea > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-textarea > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-textarea > .container textarea, z-input-textarea > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
z-input-file {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  height: 73px; }
  z-input-file.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-file[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-file[required].hide-required > label:after {
    content: unset; }
  z-input-file.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-file.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-file > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-file > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-file > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-file > .container textarea, z-input-file > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
  z-input-file[multiple] > .container > .images {
    justify-content: unset; }
  z-input-file > .container {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 68px;
    padding: 0 4px; }
    z-input-file > .container > .custom_text {
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-select: none; }
      z-input-file > .container > .custom_text.hide {
        display: none; }
      z-input-file > .container > .custom_text > i {
        margin-right: 4px;
        user-select: none;
        -webkit-user-select: none; }
      z-input-file > .container > .custom_text > span {
        user-select: none;
        -webkit-user-select: none; }
    z-input-file > .container input {
      display: none; }
    z-input-file > .container > .previews {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
      width: 100%; }
      z-input-file > .container > .previews.hide {
        display: none; }
      z-input-file > .container > .previews > .preview {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 50px;
        margin: 4px; }
z-input-color {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px; }
  z-input-color.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-color[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-color[required].hide-required > label:after {
    content: unset; }
  z-input-color.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-color.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-color > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-color > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-color > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-color > .container textarea, z-input-color > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
  z-input-color.focus > .container > .picker {
    display: block; }
  z-input-color > .container {
    position: relative; }
    z-input-color > .container > input {
      display: none; }
    z-input-color > .container > .fakeInput {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      height: 33px;
      cursor: pointer; }
      z-input-color > .container > .fakeInput > .color {
        overflow: hidden;
        height: 17px;
        width: 17px;
        border-radius: 4px;
        border: 1px solid var(--color-text-25); }
    z-input-color > .container > .picker {
      position: absolute;
      display: none;
      width: 280px;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 12px);
      background: var(--color-background-100);
      box-shadow: 0 0 6px 2px #0002;
      border-radius: 6px;
      cursor: auto; }
      z-input-color > .container > .picker input {
        font-family: monospace; }
      z-input-color > .container > .picker::before, z-input-color > .container > .picker::after {
        content: "";
        position: absolute;
        background: var(--color-background-100);
        left: 50%; }
      z-input-color > .container > .picker::before {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 6px 2px #0002;
        bottom: -5px;
        transform: translateX(-50%) rotate(45deg); }
      z-input-color > .container > .picker::after {
        width: 24px;
        height: 12px;
        bottom: 0;
        transform: translateX(-50%); }
      z-input-color > .container > .picker > .top {
        height: 100px;
        width: 100%;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' style='paint-order: fill%3B fill: rgb(187  187  187)%3B'%3E%3C/rect%3E%3Crect width='10' height='10' style='paint-order: fill%3B fill: rgb(187  187  187)%3B' x='10' y='10'%3E%3C/rect%3E%3C/svg%3E");
        background-size: 20px 20px; }
        z-input-color > .container > .picker > .top > .color {
          height: 100%;
          width: 100%;
          border-top-left-radius: inherit;
          border-top-right-radius: inherit;
          background: var(--color-main-50); }
      z-input-color > .container > .picker > .bottom {
        display: flex;
        flex-direction: column; }
        z-input-color > .container > .picker > .bottom > .tabs {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          background: #0001;
          padding-top: 4px; }
          z-input-color > .container > .picker > .bottom > .tabs > .tab {
            width: 100%;
            text-align: center;
            padding: 8px 0;
            cursor: pointer; }
            z-input-color > .container > .picker > .bottom > .tabs > .tab.active {
              background: var(--color-background-100);
              border-top-left-radius: 6px;
              border-top-right-radius: 6px; }
        z-input-color > .container > .picker > .bottom > .tabs_content {
          height: 190px;
          padding: 12px; }
          z-input-color > .container > .picker > .bottom > .tabs_content > .tab {
            display: none; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab.active {
              display: flex;
              flex-direction: column; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HEXA"] > .top > .field > input {
              width: 102px;
              padding-left: 27px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HEXA"] > .top > .field::before {
              content: "\f292";
              font-family: "Font Awesome 5 Pro";
              position: absolute;
              left: 10px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HEXA"] > .sliders > .row {
              grid-template-columns: 1fr 40px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > * {
              font-family: monospace; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > input {
              width: 30px;
              padding: 8px 0 8px 6px; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > input[color="red"] {
                width: 24px;
                padding: 8px 0;
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > input[color="green"] {
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > input[color="blue"] {
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .top > .field > input:last-of-type {
                width: 37px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="RGBA"] > .sliders > .row {
              grid-template-columns: 1fr 55px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > * {
              font-family: monospace; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > input {
              width: 32px;
              padding: 8px 0 8px 8px; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > input[color="hue"] {
                width: 24px;
                padding: 8px 0;
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > input[color="saturation"] {
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > input[color="lightness"] {
                text-align: end; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .top > .field > input:last-of-type {
                width: 39px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .sliders > .row {
              grid-template-columns: 1fr 55px; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .sliders > .row[color="hue"] > .slider::before {
                background: linear-gradient(to right, #ff0000 0%, #ffff00 calc(100% / 6), #00ff00 calc(100% / 6 * 2), #00ffff calc(100% / 6 * 3), #0000ff calc(100% / 6 * 4), #ff00ff calc(100% / 6 * 5), #ff0000 100%); }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab[type="HSLA"] > .sliders > .row[color="lightness"] > .slider > .circle {
                border-color: #ffffff; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .top {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .top > .field {
                position: relative;
                display: flex;
                align-items: center; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .top > i {
                position: relative;
                font-size: 18px;
                cursor: pointer; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .top > i.copied::after {
                  content: "copied";
                  position: absolute;
                  bottom: calc(100% + 6px);
                  background: var(--color-text-100);
                  border-radius: 5px;
                  padding: 4px 8px;
                  color: var(--color-background-100);
                  left: 50%;
                  transform: translateX(-50%);
                  font-family: sans-serif;
                  font-size: 12px; }
            z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders {
              display: flex;
              flex-direction: column; }
              z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row {
                display: grid;
                grid-template-columns: 1fr 40px;
                gap: 8px;
                align-items: center; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="red"] > .slider::before {
                  background: linear-gradient(to right, #000000 8px, #ff0000 200px); }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="red"] > .slider > .circle {
                  border-color: #ffffff; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="green"] > .slider::before {
                  background: linear-gradient(to right, #000000 8px, #00ff00 200px); }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="green"] > .slider > .circle {
                  border-color: #ffffff; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="blue"] > .slider::before {
                  background: linear-gradient(to right, #000000 8px, #0000ff 200px); }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row[color="blue"] > .slider > .circle {
                  border-color: #ffffff; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row > .slider {
                  position: relative;
                  display: flex;
                  align-items: center;
                  height: 16px;
                  border-radius: 20px;
                  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' style='paint-order: fill%3B fill: rgb(187  187  187)%3B'%3E%3C/rect%3E%3Crect width='10' height='10' style='paint-order: fill%3B fill: rgb(187  187  187)%3B' x='10' y='10'%3E%3C/rect%3E%3C/svg%3E");
                  background-size: 16px 16px;
                  overflow: hidden; }
                  z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row > .slider.clicked > .circle {
                    cursor: grabbing; }
                  z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row > .slider > .circle {
                    position: absolute;
                    left: 50%;
                    height: 14px;
                    width: 14px;
                    border-radius: 16px;
                    border: 2px solid #000000;
                    cursor: grab; }
                  z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row > .slider::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%; }
                z-input-color > .container > .picker > .bottom > .tabs_content > .tab > .sliders > .row > input {
                  text-align: end; }
z-input-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  min-width: 200px; }
  z-input-dropdown.focus > .container {
    border: 1px solid var(--color-text-50); }
  z-input-dropdown[required] > label:after {
    content: "*";
    margin-left: 4px;
    color: var(--color-danger-100); }
  z-input-dropdown[required].hide-required > label:after {
    content: unset; }
  z-input-dropdown.z-input-success > .container {
    border: 1px solid var(--color-success-75) !important; }
  z-input-dropdown.z-input-danger > .container {
    border: 1px solid var(--color-danger-75) !important; }
  z-input-dropdown > label {
    top: 0;
    left: 6px;
    max-lines: 1;
    max-width: calc(100% - 12px);
    position: absolute;
    line-height: 12px;
    font-size: 12px;
    height: 12px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  z-input-dropdown > .container {
    height: fit-content;
    width: 100%;
    outline: none;
    background: var(--color-background-100);
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-text-25);
    transition: border .3s;
    margin-top: 13px;
    cursor: text;
    flex-direction: unset;
    margin-bottom: 0; }
    z-input-dropdown > .container:hover {
      border: 1px solid var(--color-text-50); }
    z-input-dropdown > .container textarea, z-input-dropdown > .container input {
      background: none !important;
      outline: none;
      border: none;
      width: 100%;
      resize: vertical;
      padding: 8px 12px;
      border-radius: 6px; }
  z-input-dropdown[discreet] {
    margin: 0;
    width: fit-content;
    min-width: fit-content; }
    z-input-dropdown[discreet] > label {
      display: none; }
    z-input-dropdown[discreet] > .container {
      margin: 0;
      background: unset;
      border: unset;
      width: fit-content;
      height: fit-content;
      border-radius: unset; }
      z-input-dropdown[discreet] > .container > input {
        width: fit-content;
        padding: 0 8px 0 0;
        border-radius: unset; }
      z-input-dropdown[discreet] > .container > .selected {
        background: unset;
        border: unset;
        white-space: nowrap;
        padding: 0 8px 0 0;
        cursor: pointer; }
    z-input-dropdown[discreet] > .options {
      border-top: 1px solid var(--color-text-50);
      border-radius: 6px;
      padding-top: 0;
      overflow: hidden;
      width: fit-content;
      top: 100%; }
      z-input-dropdown[discreet] > .options > .scroll {
        border-radius: 6px;
        background: white; }
  z-input-dropdown.focus > .container > input {
    display: block; }
  z-input-dropdown.focus > .container > .selected {
    display: none; }
  z-input-dropdown.focus > .options {
    display: flex; }
  z-input-dropdown.z-input-success > .options {
    border: 1px solid var(--color-success-75) !important;
    border-top: none !important; }
  z-input-dropdown.z-input-danger > .options {
    border: 1px solid var(--color-danger-75) !important;
    border-top: none !important; }
  z-input-dropdown > .container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 33px; }
    z-input-dropdown > .container:after {
      content: "\f0d7";
      font-family: "Font Awesome 5 Pro";
      font-weight: 900;
      position: absolute;
      right: 8px;
      cursor: pointer; }
    z-input-dropdown > .container > input {
      display: none;
      margin-right: 17px; }
    z-input-dropdown > .container > .selected {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      margin-right: 17px;
      width: 100%;
      height: 100%;
      background-color: var(--color-background-100); }
      z-input-dropdown > .container > .selected.placeholder {
        opacity: 35%; }
      z-input-dropdown > .container > .selected > .element {
        display: flex;
        align-items: center; }
        z-input-dropdown > .container > .selected > .element > .image {
          max-width: 20px;
          max-height: 20px;
          border-radius: 4px;
          margin-right: 4px; }
        z-input-dropdown > .container > .selected > .element > .color {
          width: 12px;
          height: 12px;
          border-radius: 12px;
          margin-right: 4px; }
        z-input-dropdown > .container > .selected > .element > .icon {
          margin-right: 4px; }
        z-input-dropdown > .container > .selected > .element:not(:last-child)::after {
          content: ",";
          margin-right: 4px; }
  z-input-dropdown > .options {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    flex-direction: column;
    background: var(--color-background-100);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid var(--color-text-50);
    border-top: none;
    width: 100%;
    padding-top: 6px;
    z-index: 100;
    transition: border .3s; }
    z-input-dropdown > .options > .scroll {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px; }
      z-input-dropdown > .options > .scroll > .empty_options {
        display: flex;
        align-items: center;
        min-height: 40px;
        height: 40px;
        max-height: 40px;
        padding: 0 20px; }
  z-input-dropdown z-input-dropdown-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px; }
    z-input-dropdown z-input-dropdown-section::before {
      content: attr(text);
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      min-height: 40px;
      height: 40px;
      max-height: 40px;
      padding: 0 20px;
      border-bottom: 1px solid var(--color-background-second-100);
      user-select: none;
      -webkit-user-select: none; }
    z-input-dropdown z-input-dropdown-section > z-input-dropdown-option {
      padding-left: 40px; }
      z-input-dropdown z-input-dropdown-section > z-input-dropdown-option:first-child {
        border-top: 1px solid var(--color-background-second-100); }
  z-input-dropdown z-input-dropdown-option {
    display: flex;
    align-items: center;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-background-second-100);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none; }
    z-input-dropdown z-input-dropdown-option:hover {
      background-color: var(--color-background-second-100); }
    z-input-dropdown z-input-dropdown-option[selected] {
      background-color: var(--color-background-second-100); }
      z-input-dropdown z-input-dropdown-option[selected] > .text {
        font-weight: bold; }
    z-input-dropdown z-input-dropdown-option > .image {
      max-width: 20px;
      max-height: 20px;
      border-radius: 4px;
      margin-right: 4px; }
    z-input-dropdown z-input-dropdown-option > .color {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      margin-right: 4px; }
    z-input-dropdown z-input-dropdown-option > .icon {
      margin-right: 4px; }

/*# sourceMappingURL=z-input.css.map */