@use "variables";

@mixin pageBase {
  background: #101012;
  border: 1px solid variables.$col-border-lining;
  padding: 1.5rem 1.5rem;
  border-radius: 10px;
  min-height: 80vh;
  height: 100%;
  margin-top: 1rem;
  padding-bottom: 5rem;

  @media only screen and (max-width: 1000px){
    margin-top: .3rem !important;
    padding: 1rem 1.2rem;
    padding-bottom: 5rem;
  }


  h3{
    font-size: 1.2rem;
    font-weight: 500;
  }

  p{
    padding-top: .2rem;
    font-size: .85rem;
    opacity: .85;
    color: variables.$col-white;
    padding-bottom: .2rem;
  }
}

@mixin headerIntro {
  h3{
    font-size: 1.2rem;
    font-weight: 600;
  }
  p{
    padding-top: .3rem;
    font-size: .9rem;
    opacity: .85;
  }
}

@mixin formLabel {
    color: variables.$col-white;
    opacity: .9;
    font-weight: 600;
    font-size: .8rem;
    font-family: variables.$font;
}



@mixin formInput {
  height: 3.2rem;
  border-radius: 10px;
  padding: .6rem 1rem;
  width: 100%;
  margin-bottom: 1rem;
  margin-top: .3rem;
  // border: 1px solid #E0E0E0;
  // background: variables.$col-white;
  background: transparent;
  border: 1px solid #2B2B2B;
  outline: none;
  // background: variables.$col-active-btn-bg;
  color: variables.$col-white !important;
  font-family: variables.$font;
  opacity: 1 !important;
  font-size: .85rem;
  font-weight: 400;
}

@mixin focusInput {
    border: 1px solid variables.$col-orange;
    background: variables.$col-white;
}

@mixin formSelect {
  height: 3.2rem;
  border-radius: 10px;
  padding: .5rem 1rem;
  width: 100%;
  margin-bottom: 1rem;
  margin-top: .3rem;
  border: 1px solid #2B2B2B;
  // border: 1px solid #E0E0E0;
  background: transparent;
  outline: none;
  // background: variables.$col-active-btn-bg;
  color: variables.$col-white !important;
  font-family: variables.$font;
  font-size: .85rem;
  font-weight: 400;
  
}

@mixin formButton {
  border: none;
  padding: .9rem 2rem;
  color: variables.$col-dark !important;
  font-size: .95rem;
  font-weight: 600;
  background: variables.$col-orange !important;
  border-radius: 2px;
  transition: all ease-in .5s;
} 

@mixin dashPagesButton {
  background: variables.$col-orange !important;
  padding: .7rem 1.2rem;
  color: variables.$col-dark;
  font-size: .8rem;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  text-transform: capitalize;
}

@mixin dashPageHeader{
  padding-bottom: .5rem;
  h3{
      font-family: variables.$font-bold;
      font-size: 1.2rem;
      color: variables.$col-secondary;
      @media only screen and (max-width: 1000px) {
          font-size: 1rem;
      }
  }

  p{
      font-size: .85rem;
      font-weight: 500;
      opacity: .75;
      padding-bottom: 1.2rem;
      padding-top: .3rem;
      @media only screen and (max-width: 1000px) {
          font-size: .8rem;
          padding-bottom: 1rem;
      }
  }
}

@mixin formButton {
  background: variables.$col-primary-btn;
  margin-top: 1rem;
  padding: .85rem .5rem;
  border-radius: 10px;
  color: #FFF;
  font-size: .85rem;
  font-weight: 600;
  width: 100%;
}


@mixin dashPageComponent {
  background: #101012;
  border: 1px solid variables.$col-border-lining;
  padding: 1.5rem 1.5rem;
  border-radius: 10px;
  margin-top: 1.5rem;
  margin-bottom: 2rem;

  @media only screen and (max-width: 1000px){
    padding: 1.2rem 1.2rem;
  }
}




//ADMIN RELATED MIXINS 
@mixin adminPageIntro {
  background: #101012;
  border: 1px solid variables.$col-border-lining;
  padding: 1.5rem 1.5rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  // height: 100%;
  h1{
    font-size: 1.4rem;
    font-weight: 700;
    color: variables.$col-heading-color;
  }
  p{
    font-size: .88rem;
    opacity: .7;
    font-weight: 500;
    color: variables.$col-text-color;
    padding-bottom: .4rem;
  }
}


@mixin phone {
  @media only screen and (max-width: 1000px){
      @content
  }
};

@mixin tab {
  @media only screen and (max-width: 1200px) {
      @content
    }
};

@mixin  landscape {
  @media only screen and (orientation: landscape) {
      @content
    } 
};