@import "vars";

$form-el-line-height: 1.8em;
$middle-border-radius: $form-el-line-height / 6;
$edge-border-radius: $form-el-line-height / 4;

%modal-elements {
  .content,
  .title-bar {
    padding: 1.25rem;
    background-color: var(--base-color-65);
    backdrop-filter: blur(5px);
  }

  .title-bar {
    padding: 0.65rem 1.25rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: var(--inverse-color-05);
    font-size: 0.9em;
    font-weight: 500;
  }

  .content {
    border-radius: 0 0 0.25rem 0.25rem;

    &:first-child {
      border-radius: 0.25rem;
    }
  }

  button,
  input[type="text"],
  select {
    display: block;
    width: 100%;
    line-height: $form-el-line-height;
    padding: 0 0.75em;
    border: 0;
    border-radius: $edge-border-radius;
    background-color: var(--inverse-color-10);
    transition: background-color 0.2s;

    &:disabled {
      opacity: 0.5;
    }

    &:focus {
      background-color: var(--inverse-color-20);
    }

    &.error {
      background-color: salmon;
    }

    :global(.icon) {
      height: 16px;
      width: 16px;
      fill: var(--inverse-color);
      vertical-align: text-bottom;
    }
  }

  button[type="submit"] {
    background-color: $action-button-bg-color;
    color: $action-button-text-color;
    font-weight: 500;

    &:focus {
      background-color: $action-button-focus-bg-color;
    }
  }

  select {
    min-width: 12rem;
    max-width: 20rem;
    padding-right: 1.25rem;
    background-image: var(--dropdown-arrow);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: top 9px right 7px;
    -webkit-appearance: none;
  }

  .row + .row {
    margin-top: 0.5rem;
  }

  .select-folder-array {
    display: flex;

    button,
    input {
      border-radius: $middle-border-radius;

      + button,
      + input {
        margin-left: 4px;
      }
    }

    button {
      width: auto;
    }

    input {
      flex-grow: 1;
    }

    :first-child {
      border-top-left-radius: $edge-border-radius;
      border-bottom-left-radius: $edge-border-radius;
    }

    :last-child {
      border-top-right-radius: $edge-border-radius;
      border-bottom-right-radius: $edge-border-radius;
    }
  }

  .checkbox-array {
    display: flex;
    align-items: center;
    position: relative;

    input[type="checkbox"] {
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      margin: 0;
      margin-bottom: -2px;
      border-radius: 4px;
      border: 1px solid var(--inverse-color);
      transition: all 0.2s;

      &:checked {
        background-color: var(--inverse-color);

        &::before {
          content: "✔";
          position: absolute;
          top: 0;
          color: var(--base-color);
        }
      }
    }

    label {
      padding-left: 0.3rem;
      flex-grow: 1;
    }
  }

  .error-text {
    line-height: 1;
    color: salmon;
    font-size: 0.9em;

    :not(:first-child) {
      padding-top: 0.25rem;
    }
  }
}

.modal {
  background: none;
  position: unset;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 1rem 3rem var(--inverse-color-05);
  color: var(--inverse-color);

  @extend %modal-elements;
}
