ilios/frontend

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

@use "sass:color";

.user-profile-bio {
  label {
    @include m.ilios-label;
  }

  .actions {
    @include m.detail-container-actions;
  }

  .error {
    text-align: center;
  }

  .primary-school {
    @include m.font-size("medium");
    padding: 0 0.5rem;
  }

  .form {
    @include m.ilios-form;
    grid-template-columns: 1fr;

    .item {
      @include m.ilios-form-item;

      &.last {
        @include m.ilios-form-last-item;
      }

      &.synced-from-directory input {
        background-color: color.adjust(c.$fernGreen, $lightness: 40%);
        transition: background-color 500ms ease;
      }
    }
  }

  .campus-id-controls {
    display: flex;

    button {
      background-color: c.$blueMunsell;
      height: 2rem;
      margin-bottom: 0.25rem;
      margin-left: 0.5rem;
    }
  }

  .cancel-password-field {
    display: inline-block;
    text-align: left;
    width: 20%;
  }

  meter {
    background: none;
    background-color: c.$white;
    border: 0.5px solid c.$raisinBlack;
    height: 0.75rem;
    margin: 0.25rem 0;
    width: 60%;
  }

  meter[value="0"] {
    width: 40%;
  }

  meter::-webkit-meter-bar {
    background: none;
    background-color: c.$white;
  }

  meter[value="0"]::-webkit-meter-optimum-value {
    background: c.$crimson;
  }
  meter[value="1"]::-webkit-meter-optimum-value {
    background: c.$crimson;
  }
  meter[value="2"]::-webkit-meter-optimum-value {
    background: c.$orange;
  }
  meter[value="3"]::-webkit-meter-optimum-value {
    background: c.$gold;
  }
  meter[value="4"]::-webkit-meter-optimum-value {
    background: c.$fernGreen;
  }

  meter[value="0"]:-moz-meter-bar {
    background: c.$crimson;
  }
  meter[value="1"]:-moz-meter-bar {
    background: c.$crimson;
  }
  meter[value="2"]:-moz-meter-bar {
    background: c.$orange;
  }
  meter[value="3"]:-moz-meter-bar {
    background: c.$gold;
  }
  meter[value="4"]:-moz-meter-bar {
    background: c.$fernGreen;
  }

  .password-strength {
    display: inline-block;
    @include m.font-size("base");
    font-variant: small-caps;
    text-align: right;
    width: 10%;

    &.strength-0 {
      color: c.$crimson;
      width: 20%;
    }

    &.strength-1 {
      color: c.$crimson;
    }

    &.strength-2 {
      color: c.$orange;
    }

    &.strength-3 {
      color: c.$gold;
    }

    &.strength-4 {
      color: c.$fernGreen;
    }
  }
}