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

:host {
  display: grid;
  position: relative;

  &.novo-field-layout-horizontal {
    grid-gap: 0rem 1rem;
    grid-template-columns: 150px minmax(min-content, max-content);
    grid-template-areas:
      "label input"
      ". messages";
  }

  &.novo-field-layout-vertical {
    grid-template-columns: minmax(min-content, 100%);
    grid-template-rows: repeat(3, minmax(min-content, max-content));
    grid-template-areas:
      "label"
      "input"
      "messages";
    width: max-content;
  }

  .novo-field-label {
    grid-area: label;
    display: grid;
    align-items: center;
  }

  &.novo-field-type-color {
    .novo-field-input {
      &::ng-deep .novo-input-element {
        padding: 0;
      }
    }
  }

  &.ng-invalid.ng-dirty.ng-touched {
    .novo-field-input {
      border-bottom: 1px solid $negative !important;
    }
  }

  .novo-field-input {
    grid-area: input;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(auto, max-content) 1fr minmax(auto, max-content);
    flex: 1 1 100%;
    min-height: 2.9rem;

    &::ng-deep {
      .novo-input-element {
        @include novo-body-text();
        border: none;
        background-image: none;
        background-color: transparent;
        box-shadow: none;
        padding: 0.4rem 0.2rem 0rem;
        border-bottom: none !important;

        &:focus {
          outline: none;
        }
      }

      .novo-radio-group {
        padding: 0.5rem 0;
      }
    }

    .novo-field-prefix {
      display: flex;
      align-items: center;
    }

    .novo-field-infix {
      display: flex;
      align-items: center;
      align-self: flex-end;
      select,
      &::ng-deep .novo-input-element {
        width: 100%;
      }
    }

    .novo-field-suffix {
      display: flex;
      align-items: center;
    }
  }

  .novo-field-messages {
    grid-area: messages;
    display: grid;
  }

  .novo-field-hint-wrapper {
    display: flex;
    flex-direction: column;
  }

  &::ng-deep {
    .novo-date-range-format {
      min-width: 22rem;
    }
  }
}