/*  */
/* BUTTONS */
/*  */
.btn,
.btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 0.9375rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: var(--orange);
  font-size: 0.875rem;
  line-height: 1.4285714285714286;
  color: #fff;
  font-weight: 600;
  text-align: center;
  transition: color 0.2s ease;
  transition-property: color, background-color, boder-color, opacity;
  svg {
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.25rem 0;
  }
  /* outline */
  &.--outline {
    color: var(--orange);
    border-color: var(--orange);
    background-color: transparent;
  }
  /* light */
  &.--light {
    color: var(--orange);
    border-color: var(--light-orange);
    background-color: var(--light-orange);
  }
  /* transparent */
  &.--transparent {
    color: var(--black);
    border-color: transparent;
    background-color: transparent;
  }
  &:active,
  &:hover {
    color: #fff;
    border-color: var(--orange-dark);
    background-color: var(--orange-dark);
  }
  &.disabled,
  &[disabled] {
    cursor: default;
    color: #fff;
    border-color: var(--light-gray);
    background-color: var(--light-gray);
  }

  &.--rounded {
    border-radius: 200rem;
  }
  &.--44 {
    padding: 0.75rem 1rem;
  }
  &.--auto-w {
    width: auto;
    min-width: 0;
  }
  &.--full {
    width: auto;
    flex-grow: 1;
  }
}

/*  */
/* gd-select */
/*  */
.gd-select {
  --select-border: var(--light-gray);
  --select-border-active: #999;
  --select-border-hover: var(--light-gray);
  --select-border-radius: 0.75rem;
  --select-bg: #fff;
  --select-bg-active: #efefef;
  --select-bg-hover: #fafafa;
  --select-text: #999;
  --select-text-active: #111;
  --select-text-hover: #111;
}
.select-styled,
.gd-select select {
  position: relative;
  padding: 0.6875rem 1rem;
  /* min-width: 300px; */
  width: 100%;
  height: 44px;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
  border: 1px solid var(--select-border);
  border-radius: var(--select-border-radius);
  background-color: var(--select-bg);
  transition: color 0.2s ease;
  transition-property: color, border-color, background-color;
  &:hover {
    border-color: var(--select-border-hover);
    background-color: var(--select-bg-hover);
  }
  &:active,
  &:focus {
    border-color: var(--select-border-active);
    background-color: var(--select-bg-active);
  }
}
.gd-select select[multiple] {
  height: auto;
}
.gd-select.--auto select {
  width: auto;
}
.select-options li,
.gd-select select option {
  @apply bg-bg text-text hover:bg-main border-0 disabled:opacity-25;
}
.gd-select select[multiple] {
  padding: 0;
}
.gd-select select[multiple] option {
  padding: 12px;
}
.gd-select-holder {
  position: relative;
  z-index: 30;
  box-sizing: border-box;
  > * {
    box-sizing: border-box;
  }
  select {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    z-index: -2;
    padding: 0;
    pointer-events: none;
  }
  .select-styled {
    display: flex;
    padding-right: 8px;
    cursor: pointer;
    .select-text {
      color: var(--select-text);
      outline: none;
    }
    &.--filled .select-text {
      color: var(--select-text-active);
    }
    &.--active {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      color: var(--select-text-active);
      border-color: var(--light-gray);
      box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(102, 175, 233, 0.6);
    }
  }
  .select-arrow {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    margin-left: auto;
    transform-origin: center;
    transition: transform 0.2s ease;
    transition-property: transform, color;
    .--active > & {
      transform: rotate(180deg);
    }
  }
  .select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 400px;
    margin: -1px 0 0 0;
    padding: 0;
    border: 1px solid var(--light-gray);
    border-radius: 0 0 var(--select-border-radius) var(--select-border-radius);
    background-color: var(--select-bg);
    font-size: 14px;
    line-height: 20px;
    z-index: 30;
    transform-origin: top;
    transform: scaleY(1);
    overflow: auto;
    opacity: 1;
    border-top: none;
    box-shadow: 0 4px 8px rgba(102, 175, 233, 0.6);
    .select-options__item {
      padding: 0.6875rem 1rem;
      overflow: clip;
      &.--active {
        color: #fff;
        background-color: var(--blue);
      }
      &.--hidden {
        display: none;
      }
      @media (hover: hover) {
        &:hover {
          color: #fff;
          background-color: var(--gray-sec);
        }
      }
      &:not(:disabled) {
        cursor: pointer;
      }
    }
    .select-options-group {
      &:hover {
        background-color: transparent;
      }
    }
    .select-options-label {
      font-weight: 500;
      padding: 8px 12px;
    }
    .select-options-group__list {
      margin: 0;
      padding: 0 0 0 1rem;
    }
    .select-options-group__item {
      overflow: clip;
      padding: 8px 20px 8px 12px;
      &.--active {
        background-color: var(--select-bg-active);
      }
      &:hover {
        background-color: var(--select-bg-hover);
      }
      &:not(:disabled) {
        cursor: pointer;
      }
    }
  }
  &.--hidden {
    z-index: 20;
    .select-options {
      transform: scaleY(0.9);
      pointer-events: none;
      opacity: 0;
    }
  }
}
/*  */
/* /gd-select */
/*  */
.status {
  margin: 1rem 0;
  &.error {
    color: red;
  }
}
.form-row {
  display: flex;
  gap: 1rem;
  & ~ & {
    margin-top: 1rem;
  }
  & > * {
    flex: 1 1 0;
  }
  @media (width <= 768px) {
    flex-direction: column;
  }
}
.form-block {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
}
.form-item {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
}
.form-item,
textarea.form-item {
  border: 1px solid var(--light-gray-sec);
  color: #000000;
  border-radius: 0.75rem;
  height: auto;
  padding: 0.6875rem 1rem;
  margin: 0;
  box-shadow: none;
  outline: none;
  transition: color 0.2s ease;
  transition-property: color, border-color, background-color;
  &:focus {
    border-color: var(--orange-dark);
  }
  &.error {
    border-color: red;
  }
}
textarea.form-item {
  resize: vertical;
}
.btn-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.checkbox-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*  */
/* checkbox */
/*  */
.input-checkbox {
  cursor: pointer;
  gap: 0.5rem;
  display: flex;
  position: relative;
  border: none;
  background: none;
  margin: 0;
}
.input-checkbox input {
  z-index: -1;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  position: absolute;
}
.input-checkbox__ico {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--light-gray-sec);
  transition-property:
    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from,
    --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: ease;
  transition-duration: 0.2s;
  color: #fff;
  border-radius: 0.25rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.input-checkbox.--active .input-checkbox__ico,
.input-checkbox[aria-checked="true"] .input-checkbox__ico,
.input-checkbox__ico:is(:where(input):checked ~ *) {
  background-color: var(--orange);
  border-color: var(--orange);
}
.input-checkbox.--active .input-checkbox__ico,
.input-checkbox__ico:is(:where(input):focus-visible ~ *) {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.error ~ .input-checkbox__ico,
.--error .input-checkbox__ico {
  border-color: red;
}

.input-checkbox__ico svg {
  width: 1rem;
  height: 1rem;
  scale: 0;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: ease;
  transition-duration: 0.2s;
}

.input-checkbox__text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  flex-grow: 1;
  text-align: left;
  span {
    color: var(--gray-sec);
  }
}

.input-checkbox__text a {
  text-decoration-line: underline;
}

@media (hover: hover) {
  .input-checkbox__text a:hover {
    text-decoration-line: none;
  }
}
.input-checkbox:hover .input-checkbox__ico {
  border-color: var(--orange);
}

.input-checkbox input[disabled] ~ .input-checkbox__ico {
  border-color: var(--gray-sec);
}

.input-checkbox.--active .input-checkbox__ico svg,
.input-checkbox[aria-checked="true"] ~ .input-checkbox__ico svg,
.input-checkbox input:checked ~ .input-checkbox__ico svg {
  scale: 1;
}

/*  */
/* input-radio */
/*  */
.input-radio {
  cursor: pointer;
  gap: 0.5rem;
  display: flex;
  position: relative;
}

.input-radio input {
  z-index: -1;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  position: absolute;
}

.input-radio__ico {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--light-gray-sec);
  transition-property:
    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from,
    --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: ease;
  transition-duration: 0.2s;
  border-radius: 4rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-radio__ico:is(:where(input):checked ~ *) {
  background-color: var(--orange);
}

.input-radio__ico:is(:where(input):focus-visible ~ *) {
  outline-style: solid;
  outline-width: 1px;
}
.error ~ .input-radio__ico,
.--error .input-radio__ico {
  border-color: red;
}
.input-radio__ico:after {
  content: "";
  width: 1rem;
  height: 1rem;
  scale: 0;
  background-color: #fff;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: ease;
  transition-duration: 0.2s;
  border-radius: 4rem;
}
.input-radio__text {
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  flex-grow: 1;
  text-align: left;
}
.input-radio__text a {
  text-decoration-line: underline;
}

@media (hover: hover) {
  .input-radio__text a:hover {
    text-decoration-line: none;
  }
}
.input-radio input:checked ~ .input-radio__ico,
.input-radio:hover .input-radio__ico {
  border-color: var(--orange);
}
.input-radio input[disabled] ~ .input-radio__ico {
  border-color: var(--border);
}
.input-radio input:checked ~ .input-radio__ico:after {
  scale: 0.5;
}

/*  */
/* file-list */
/*  */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  @media (width <= 768px) {
    gap: 1rem;
  }
}
.file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  @media (width <= 768px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}
.file-list,
.file-grid {
  margin-top: 2rem;
  .file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--light-gray-bg);
    border-radius: 1.5rem;
    .file-ico {
      display: flex;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 3.5rem;
      background: #fff;
      flex-shrink: 0;
      svg {
        width: 2rem;
        height: 2rem;
        margin: auto;
      }
    }
    .file-name {
      font-size: 1.25rem;
      line-height: 1.3;
      color: var(--black);
      font-weight: 600;
    }
    .file-download {
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;
      margin-left: auto;
      &:hover {
        color: var(--orange);
      }
      svg {
        margin: auto;
      }
    }
  }
  @media (width <= 768px) {
    margin-top: 1rem;
    .file-item {
      padding: 1rem;
      .file-ico {
        width: 2.5rem;
        height: 2.5rem;
        svg {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .file-name {
        font-size: 1.125rem;
      }
    }
  }
}