// Experimental Features styles, as we cannot use PatternFly Core styles

.experimental {
  &-border {
    border-top: 0;
    border-right: 3px solid;
    border-right-color: @color-pf-light-green-400;
    border-bottom: 3px solid;
    border-bottom-color: @color-pf-light-green-400;
    border-left: 3px solid;
    border-left-color: @color-pf-light-green-400;
  }
  &-bar {
    margin-top: 35px;
    height: 25px;
    @media (max-width: 768px) { height: 48px; }
    background-color: @color-pf-light-green-400;
    text-align: center;
    transition: ease all .3;
    &-minimal {
      height: 5px;
      background-color: @color-pf-light-green-400;
      .experimental-text {
        display: none;
      }
    }
  }
  &-page {
    height: 100vh;
    background-color: @color-pf-black-200;
    text-align: center;
    .experimental-content {
      margin-top: 5%;
      i {
        color: @color-pf-light-green-400;
      }
    }
  }
  &-more-info {
    padding-left: 10px;
    padding-right: 10px;
    height: 25px;
    background-color: @color-pf-light-green-400;
    border-width: 0;
    color: @color-pf-black;
    vertical-align: baseline;
  }
}

.btn-link-experimental {
  &:extend(.btn-link);
  padding: 0;
  height: 25px;
  background-color: @color-pf-light-green-400;
  border-width: 0;
  color: @color-pf-black;
  text-decoration: underline;
  vertical-align: baseline;
}
.btn-experimental {
  &:extend(.btn-default);
  border-color: @color-pf-light-green-400;
  background-color: @color-pf-light-green-400;
  background-image: linear-gradient(to bottom, @color-pf-light-green-400 0, @color-pf-light-green-400 100%);
}