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

:host {
  &.novo-field-appearance-outline {
    border: 1px solid lighten($dark, 45%) !important;
    border-radius: 0.4rem;
    padding: 0.5rem;

    &.novo-field-layout-vertical {
      .novo-field-label {
        background: white;
        margin-top: -1.5rem;
        margin-left: 0.5rem;
        width: max-content;
        padding: 0.5rem;
      }
    }

    &:not(.novo-focused):hover {
      border: 1px solid $dark !important;
    }
    &.novo-focused {
      border: 1px solid $positive !important;
    }
    &.novo-field-invalid {
      border: 1px solid $negative !important;
    }
  }
}