@import "../../styles/variables.scss";
@import "../common/typography/text.mixins";

:host {
  &.novo-field-appearance-list {
    &.novo-field-layout-horizontal {
      border-bottom: 1px solid $off-white !important;
      padding: 0.5rem 1.2rem;
      min-height: 4.2rem;

      .novo-field-label {
        align-items: start;
        margin-top: 0.9rem;
      }
      &.novo-field-no-label {
        grid-template-columns: 0px minmax(300px, 600px);
        gap: 0;
      }

      &.novo-field-appearance-underlined {
        &:not(.novo-focused):hover {
          .novo-field-input {
            background: rgba($positive, 0.15);
          }
        }
        &.novo-focused {
          .novo-field-label {
            color: $positive !important;
          }
        }
        &.novo-field-invalid {
          .novo-field-label {
            color: $negative !important;
          }
        }
      }
    }
  }
}