// .environment-wrapper {
//   position: absolute;
//   right: 0;
//   top: 0;
//   height: 80px;
//   width: 100px;
//   overflow: hidden;
//   cursor: pointer;
//   * {
//     transition: all 350ms ease;
//   }
//   &.is-demo {
// 		color: var(--environment-demo);
//     .environment-content {
//       &.development {
//         opacity: 1;
//       }
//     }
//   }
//   &.is-prod {
// 		color: var(--environment-prod);
//     .environment-content {
//       &.development {
//         opacity: 0;
//       }
//       &.production {
//         opacity: 1;
//       }
//     }
//   }
//   &:hover {
//     opacity: 0.8;
//     &.is-demo {
//       color: var(--environment-prod);
//       .environment-content {
//         &.development {
//           opacity: 0;
//         }
//         &.production {
//           opacity: 1;
//         }
//       }
// 		}
// 		&.is-prod {
//       color: var(--environment-demo);
//       .environment-content {
//         &.development {
//           opacity: 1;
//         }
//         &.production {
//           opacity: 0;
//         }
//       }
//     }
//   }
//   * {
//     cursor: pointer;
//   }
//   &::before {
//     position: absolute;
//     content: "";
//     width: 0;
//     height: 0;
//     border-left: 100px solid transparent;
//     border-right: 12px solid transparent;
//     border-top: 80px solid currentColor;
//     left: 0px;
//     z-index: 5;
//   }
//   .environment-content {
//     width: 144px;
//     -ms-transform: rotate(40deg);
//     transform: rotate(40deg);
//     text-align: center;
//     top: 8px;
//     position: absolute;
//     color: #fff;
//     z-index: 9;
//     right: -45px;
//     &.production {
//       opacity: 0;
//     }
//     &.development {
//       opacity: 0;
//     }
//     b {
//       font-size: 10px;
//       font-weight: 500;
//     }
//     label {
//       margin: 0;
// 			font-weight: bold;
// 			font-size: 13px;
//     }
//   }
// }

.environment-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #ff8a3f, #f44);

  .environment-content {
    height: 54px;
    max-width: 1000px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .environment-alert{
      color: #fff;
    }
  }

  button {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding-left: 24px;
    padding-right: 24px;
    transform: scale(0.8);
    transition: all 300ms ease;

    &:focus, &:active {
      color: #fff;
      outline: none;
      box-shadow: none;
    }

    &:hover {
      color: #fff;
      transform: scale(0.9);
    }
  }
}