@use "variables";

.form-group {
  font-size: variables.$input-font-size;
  transition: opacity 0.2s;

  label {
    align-items: center;
    color: variables.$black;
    display: flex;
    justify-content: space-between;
    transition: color 0.2s;
  }

  input,
  textarea {
    &::placeholder {
      color: variables.$grey-20;
    }
  }

  .text-input-wrapper,
  .color-picker-wrapper,
  .select-wrapper,
  .file-input-wrapper {
    align-items: center;
    background-color: variables.$white;
    border: 1px solid variables.$grey-40;
    border-radius: variables.$border-radius;
    box-sizing: border-box;
    display: flex;
    margin-left: 1em;
    min-width: 50%;
    transition: border-color 0.2s;
    width: 50%;

    svg {
      flex-shrink: 0;
    }

    .icon {
      fill: variables.$grey-40;
      transition: fill 0.2s;
      margin-right: 0.75em;

      &.clear {
        cursor: pointer;

        &:hover {
          path {
            stroke: variables.$error-color;
          }
        }
      }
    }

    .icon-empty {
      margin-left: 0.75em;

      + input {
        padding-left: 0.25em;
      }
    }

    > input,
    .icon-remove {
      transition: stroke 0.2s;
    }

    > input,
    > .button-wrapper button,
    .file-input {
      background-color: transparent;
      border: 0;
      border-radius: variables.$border-radius;
      box-sizing: border-box;
      color: variables.$grey-80;
      flex-grow: 1;
      font-size: 1em;
      min-width: 1rem;
      outline: none;
      padding: 0.75em;
      transition: color 0.2s;
      width: 100%;

      &:focus {
        color: variables.$berta-accent;
      }
    }
  }

  .color-picker-wrapper {
    overflow: hidden;
    position: relative;

    > input {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2LjY2NjcgMjYuNjY2N0g0MFY0MEgyNi42NjY3VjI2LjY2NjdaIiBmaWxsPSIjOUI5QjlCIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDI2LjY2NjdIMTMuMzMzM1Y0MEgwVjI2LjY2NjdaIiBmaWxsPSIjOUI5QjlCIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4zMzMzIDEzLjMzMzNIMjYuNjY2N1YyNi42NjY2SDEzLjMzMzNWMTMuMzMzM1oiIGZpbGw9IiM5QjlCOUIiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2LjY2NjcgMEg0MFYxMy4zMzMzSDI2LjY2NjdWMFoiIGZpbGw9IiM5QjlCOUIiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMEgxMy4zMzMzVjEzLjMzMzNIMFYwWiIgZmlsbD0iIzlCOUI5QiIvPjwvc3ZnPg==);
      background-position-x: right;
      background-repeat: no-repeat;
      border-radius: 0;
      margin-left: 0;
      padding-right: 40px;
      width: 100%;
    }

    .color-preview {
      bottom: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
    }
  }

  .select-wrapper {
    display: block;
    position: relative;
    white-space: nowrap;

    .button-wrapper {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      padding-right: 0.75em;
      width: 100%;
    }

    button {
      appearance: none;
      background-color: transparent;
      overflow-x: hidden;
      text-align: left;
      text-overflow: ellipsis;
    }

    .drop-icon {
      min-width: 10px;

      path {
        stroke: variables.$grey-40;
        transition: stroke 0.2s;
      }
    }

    ul {
      background-color: variables.$white;
      border: 1px solid variables.$grey-80;
      border-radius: 0 0 variables.$border-radius variables.$border-radius;
      box-sizing: border-box;
      display: none;
      left: -1px;
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
      right: -1px;
      z-index: 1;

      li {
        color: variables.$grey-80;
        overflow-x: hidden;
        padding: 0.75em;
        text-overflow: ellipsis;

        &:hover {
          color: variables.$berta-accent;
        }
      }
    }
  }

  .file-input-wrapper {
    cursor: pointer;

    input {
      display: none;
    }

    .file-input {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .add {
      margin-right: 0.75em;
    }
  }

  .toggle-wrapper {
    $toggle-width: 40px;
    $toggle-height: 22px;
    $toggle-slider-size: 20px;

    text-align: right;
    width: 50%;

    input {
      margin-left: -9999px;
      position: absolute;
      visibility: hidden;
      &:disabled {
        + span {
          border-color: variables.$grey-10;
          cursor: default;
          &:after {
            background-color: variables.$grey-10;
          }
        }
      }
      &:active:enabled + span {
        border-color: variables.$grey-80;
      }
      &:hover:enabled + span {
        border-color: variables.$grey-80;
      }
      &:checked + span {
        background-color: variables.$grey-80;
      }
      &:checked + span:after {
        left: $toggle-width - $toggle-slider-size - 2;
        background-color: variables.$white;
        border-color: variables.$grey-80;
      }
    }

    span {
      background-color: variables.$white;
      border: 1px solid variables.$grey-40;
      border-radius: $toggle-width;
      cursor: pointer;
      display: inline-block;
      height: $toggle-height;
      transition: background-color 0.2s, border-color 0.2s;
      width: $toggle-width;

      &:after {
        background-color: variables.$grey-40;
        border: 1px solid variables.$white;
        border-radius: 50%;
        content: "";
        display: block;
        height: $toggle-slider-size;
        left: 0;
        position: relative;
        transition: left 0.2s, border-color 0.2s;
        width: $toggle-slider-size;
      }
    }
  }

  textarea {
    border: 1px solid variables.$grey-40;
    border-radius: variables.$border-radius;
    box-sizing: border-box;
    color: variables.$grey-40;
    display: block;
    font-size: 1em;
    margin: 0.75em 0 0;
    outline: none;
    padding: 0.75em;
    transition: color 0.2s, border-color 0.2s;
    width: 100%;

    &:focus {
      color: variables.$berta-accent;
    }
  }

  &.no-label {
    .text-input-wrapper {
      margin-left: 0;
      width: 100%;
    }
  }

  &:hover,
  &.bt-focus {
    .file-input,
    input,
    .button-wrapper button,
    textarea:not(:focus):not([disabled]) {
      color: variables.$grey-80;
    }

    .text-input-wrapper,
    .color-picker-wrapper,
    .select-wrapper,
    .file-input-wrapper,
    textarea {
      border: 1px solid variables.$grey-80;

      .icon {
        fill: variables.$grey-80;
      }

      .icon-remove {
        stroke: variables.$grey-80;
      }
    }

    .select-wrapper {
      color: variables.$grey-80;

      .drop-icon {
        path {
          stroke: variables.$grey-80;
        }
      }
    }
  }

  &.bt-focus {
    .select-wrapper {
      border-radius: variables.$border-radius variables.$border-radius 0 0;

      ul {
        display: block;
      }
    }
  }

  &.bt-disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &.error {
    label,
    .file-input,
    input,
    .button-wrapper button,
    textarea:not(:focus) {
      color: variables.$error-color;
    }

    .text-input-wrapper,
    .color-picker-wrapper,
    .select-wrapper,
    .select-wrapper ul,
    .file-input-wrapper,
    textarea:not(:focus) {
      border-color: variables.$error-color;

      .icon {
        fill: variables.$error-color;
      }

      .drop-icon path,
      .icon-remove {
        stroke: variables.$error-color;
      }
    }
  }

  .error-message {
    color: variables.$error-color;
    margin: 0.5em 0;
  }
}

berta-files-input {
  .form-group {
    label {
      display: inline-block;
    }
    .file-input-wrapper {
      margin: 0;
      width: auto;
    }
  }
}

color-picker {
  position: absolute;
}

.color-picker {
  button {
    margin-left: 0.5em;
  }
}

.input-row {
  display: flex;

  > berta-setting,
  > berta-text-input {
    flex-grow: 1;
    width: 100%;

    &:not(:first-child) {
      .form-group {
        .text-input-wrapper {
          border-bottom-left-radius: 0;
          border-left: 0;
          border-top-left-radius: 0;
          position: relative;

          &:before {
            background-color: variables.$grey-40;
            content: "";
            display: block;
            height: 60%;
            left: 0;
            position: absolute;
            top: 20%;
            transition: background-color 0.2s;
            width: 1px;
          }

          &:hover {
            &:before {
              background-color: variables.$grey-80;
            }
          }
        }

        &.bt-focus {
          .text-input-wrapper {
            &:before {
              background-color: variables.$grey-80;
            }
          }
        }
      }
    }

    &.bt-auto-width {
      width: auto;

      + berta-setting {
        .form-group {
          .text-input-wrapper {
            border-bottom-left-radius: variables.$border-radius;
            border-top-left-radius: variables.$border-radius;
            border-left: 1px solid variables.$grey-40;

            &:before {
              display: none;
            }
          }
        }
      }
    }
  }

  .label-text {
    display: none;
  }

  .form-group {
    .text-input-wrapper {
      border-bottom-right-radius: 0;
      border-right: 0;
      border-top-right-radius: 0;
      margin-left: 0;
      width: 100%;
    }

    &.bt-disabled {
      opacity: 1;
    }
  }

  .button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    font-size: variables.$input-font-size;
    white-space: nowrap;
  }
}
