ilios/frontend

@use "../ilios-common/mixins" as cm;
@use "../ilios-common/colors" as c;

@use "sass:color";

@mixin admin-blocks() {
  display: grid;
  grid-gap: 0.5rem;

  @include cm.for-laptop-and-up {
    grid-template-columns: 1fr 1fr;
  }

  .small-component,
  .large-component {
    background-color: c.$culturedGrey;
    border: 1px solid c.$blueMunsell;
    border-radius: 5px;
    margin-bottom: 1rem;
    min-height: 5rem;
    padding: 0.5rem;

    &.alert {
      background-color: c.$white;
      border: 3px solid c.$gold;
    }

    h3 {
      margin-bottom: 1rem;
    }

    p {
      clear: both;
      margin-top: 1rem;
    }

    button {
      @include cm.font-size("base");
    }

    .inline-data {
      display: inline;
    }
  }

  .large-component {
    grid-column: 1 / -1;
  }

  .has-saved {
    background-color: color.adjust(c.$fernGreen, $lightness: 30%);
    transition: background-color 0.5s ease-out;
  }

  .has-not-saved {
    background-color: transparent;
    transition: background-color 1s ease-in;
  }
}