/* node_modules/.pnpm/@reactleaf+theme@2.0.2/node_modules/@reactleaf/theme/theme.css */
:root {
  --leaf-status-red: rgb(209, 61, 64);
  --leaf-status-yellow: rgb(150, 118, 0);
  --leaf-status-green: rgb(0, 148, 63);
  --leaf-status-blue: rgb(0, 134, 178);
  --leaf-status-grey: rgb(122, 122, 122);
  --leaf-status-lightRed: rgb(255, 232, 229);
  --leaf-status-lightYellow: rgb(246, 238, 216);
  --leaf-status-lightGreen: rgb(224, 245, 227);
  --leaf-status-lightBlue: rgb(219, 243, 255);
  --leaf-status-lightGrey: rgb(238, 238, 238);
  --leaf-grey-100: rgb(255, 255, 255);
  --leaf-grey-95: rgb(237, 238, 240);
  --leaf-grey-90: rgb(220, 222, 225);
  --leaf-grey-80: rgb(185, 190, 196);
  --leaf-grey-70: rgb(152, 159, 168);
  --leaf-grey-10: rgb(3, 3, 4);
  --leaf-primary-98: rgb(244, 249, 255);
  --leaf-primary-95: rgb(228, 240, 255);
  --leaf-primary-90: rgb(200, 225, 255);
  --leaf-primary-80: rgb(143, 193, 255);
  --leaf-primary-70: rgb(80, 160, 255);
  --leaf-primary-60: rgb(6, 127, 237);
  --leaf-primary-50: rgb(10, 98, 184);
  --leaf-primary-40: rgb(3, 71, 136);
  --leaf-primary-30: rgb(0, 45, 92);
  --leaf-primary-20: rgb(1, 22, 49);
  --leaf-primary-10: rgb(0, 3, 13);
}
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --leaf-status-yellow: color(display-p3 0.58105 0.46311 0);
    --leaf-status-green: color(display-p3 0.2109 0.57645 0.27109);
    --leaf-status-blue: color(display-p3 0.20466 0.5178 0.6896);
    --leaf-status-lightRed: color(display-p3 0.99926 0.90899 0.8976);
    --leaf-status-lightBlue: color(display-p3 0.87265 0.95035 0.99879);
    --leaf-primary-98: color(display-p3 0.96011 0.97565 0.99859);
    --leaf-primary-80: color(display-p3 0.6007 0.75266 0.98197);
    --leaf-primary-10: color(display-p3 0.0022 0.01218 0.04714);
  }
}
.leaf-title {
  font-size: 20px;
  line-height: 32px;
}
.leaf-body {
  font-size: 16px;
  line-height: 24px;
}
.leaf-label {
  font-size: 14px;
  line-height: 20px;
}
.leaf-desc {
  font-size: 12px;
  line-height: 18px;
}

/* src/components/common.css */
.leaf-input-container {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 10rem;
  --placeholder-color: var(--leaf-grey-80);
  &.filled {
    .leaf-label-area {
      color: var(--leaf-grey-10);
    }
    .leaf-input {
      border-color: var(--leaf-grey-10);
    }
  }
  &.focused {
    .leaf-label-area {
      color: var(--leaf-grey-10);
    }
    .leaf-input {
      border-color: var(--leaf-primary-60);
    }
  }
  &.error {
    .leaf-label-area {
      color: var(--leaf-status-red);
    }
    .leaf-input {
      border-color: var(--leaf-status-red);
    }
  }
  &.disabled {
    .leaf-input {
      background-color: var(--leaf-grey-95);
    }
  }
  &:not(.disabled):not(.filled):not(.focused):not(.error):hover {
    .leaf-input:not(:focus) {
      border-color: var(--leaf-grey-70);
    }
  }
  & p {
    margin: 0;
  }
}
.leaf-label-area {
  position: relative;
  height: 1.25rem;
  text-align: left;
  color: var(--leaf-grey-70);
  transition: color 0.2s;
  line-height: 0;
  & label {
    padding-left: 0.25rem;
  }
}
.leaf-input-area {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  &:hover .leaf-clear-button {
    display: block;
  }
}
.leaf-input {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.5em;
  border: 1px solid var(--leaf-grey-80);
  border-radius: 4px;
  outline: none;
  background: white;
  transition: border-color 0.2s;
  &::placeholder {
    color: var(--placeholder-color);
  }
  &:focus {
    border-color: var(--leaf-primary-60);
  }
  &.clearable {
    padding-right: 1.5rem;
  }
}
.leaf-clear-button.leaf-clear-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-0.25rem, -50%);
  display: none;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: var(--leaf-primary-95);
  border-radius: 50%;
  color: var(--leaf-grey-70);
  line-height: 0;
  cursor: pointer;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    padding: 0;
    border-radius: unset;
    background-color: currentColor;
    color: inherit;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    padding: 0;
    border-radius: unset;
    background-color: currentColor;
    color: inherit;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:hover {
    color: var(--leaf-grey-10);
  }
}
.leaf-extra-area {
  min-height: 1.125rem;
}
.leaf-error-message {
  padding-left: 0.25rem;
  color: var(--leaf-status-red);
}
.leaf-password-input .leaf-input {
  padding-right: 3rem;
}
.leaf-password-input .leaf-clear-button {
  right: 1.25rem;
}
.leaf-password-eye {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-0.25rem, -50%);
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.leaf-number-prefix {
  position: absolute;
  bottom: 50%;
  left: 0.5rem;
  padding-right: 0.25em;
  padding-top: 2px;
  transform: translateY(50%);
  color: var(--leaf-primary-10);
  opacity: 0.5;
}
.leaf-file-input {
  & .leaf-input-area {
    box-sizing: border-box;
    height: 4.5rem;
    border: 1px solid;
    border-radius: 4px;
  }
  &.filled {
    & .leaf-input-area {
      border-color: var(--leaf-grey-10);
    }
  }
  &.focused {
    & .leaf-input-area {
      border-color: var(--leaf-primary-60);
    }
  }
  &.error {
    & .leaf-input-area {
      border-color: var(--leaf-status-red);
    }
  }
  &:not(.disabled):not(.filled):not(.focused):not(.error) {
    & .leaf-input-area:not(:focus) {
      border-color: var(--leaf-grey-70);
    }
  }
}
.leaf-file-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.leaf-file-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--leaf-grey-10);
}
.leaf-file-size {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  padding-right: 0.25rem;
  color: var(--leaf-grey-70);
  &.error {
    color: var(--leaf-status-red);
  }
}
.leaf-file__url-input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 2rem;
  box-sizing: border-box;
  backdrop-filter: blur(0.25rem);
  & button {
    height: 2rem;
  }
}
.leaf-file__overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  backdrop-filter: none;
  opacity: 0;
  transition: backdrop-filter 0.2s, opacity 0.2s;
  &:hover {
    opacity: 1;
    backdrop-filter: blur(0.25rem);
  }
  & button {
    background: white;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 0.25rem;
    &:hover {
      background: var(--leaf-primary-95);
    }
  }
}
.react-datepicker__input-container {
  display: flex;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  height: 20px;
}
.react-datepicker__view-calendar-icon input.leaf-input {
  padding: 0 0.5rem 0 1.75rem;
}

/* src/index.css */
