/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.form__group {
  display: table;
  margin-bottom: 1em;
  width: 100%;

  input,
  select,
  textarea {
    background-color: white;
    border: 1px solid $gray-06;
    border-left: none;
    border-radius: 0 5px 5px 0;
    color: $gray-02;
    display: table-cell;
    font-family: $sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 7px;
    text-align: left;
    width: 100%;

    &.no-label {
      border-radius: 5px;
    }

    &:focus {
      box-shadow: none;
      outline: none;
    }
  }

  textarea {
    text-align: left;
    margin-bottom: -5px;
  }

  select {
    height: 2em;
  }

  .select-style {
    background-color: white;
    border-radius: 0 5px 5px 0;
    border: 1px solid $gray-06;
    border-left-width: 0;
    color: transparentize(#444, 0.5);
    display: table-cell;
    font-family: $sans-serif;
    font-size: 15px;
    margin: 0;
    overflow: hidden;
    padding: 3px 7px;
    text-align: left;
    width: 100%;

    select {
      -webkit-appearance: none;
      background-image: none;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 5px 8px;
      width: 130%;
    }

    select:focus {
      outline: none;
    }
    
    &.no-label {
      border-left-width: 1px;
    }
  }

  label {
    background-color: #fff;
    border: 1px solid $gray-06;
    border-right: none;
    border-radius: 5px 0 0 5px;
    color: #111;
    display: table-cell;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 7px 10px;
    vertical-align: top;
    white-space: nowrap;
    width: 25%;
  }

  input.mce_inline_error {
    background-color: lighten($dark-red, 40);
    border: 1px solid $dark-red;
  }
}

input[type="submit"] {
  cursor: pointer;
}