.ucla-ribbon__text:not(.has-text-color) {
  .ucla-ribbon--brand & {
    color: #fff;
  }
}

.has-text-align-right {
  &.ucla-ribbon--brand .ucla-ribbon__text {
  padding: 1px 8px 1px 0;
  box-shadow: -8px 0 0 #2774ae;
  margin-right: 8px;

    @media (min--moz-device-pixel-ratio: 0) {
      padding: 4px 8px 1px 0;
    }
    @media (min-width: 768px) {
      padding: 2px 12px 2px 0;
      box-shadow: -10px 0 0 #2774ae;
      margin-right: 0;
    }
  }
  &.ucla-ribbon--highlight .ucla-ribbon__text {
    padding: 8px 12px 8px 0;
    box-shadow: -12px 0 0 #FFD100;
    margin-right: 10px;


    @media (min--moz-device-pixel-ratio: 0) {
      padding: 10px 12px 8px 0;
      box-shadow: -10px 0 0 #FFD100;
    }

    @media (min-width: 768px) {
      margin-right: 0;
    }
  }
}

// .is-layout-constrained {
//   &
//     > .ucla-ribbon--highlight:where(
//       :not(.alignleft):not(.alignright):not(.alignfull)
//     ) {
//     max-width: 25ch;
//   }
//   &
//     > .ucla-ribbon--brand:where(
//       :not(.alignleft):not(.alignright):not(.alignfull)
//     ) {
//     max-width: 15ch;
//   }
// }
