@import '../../assets/sass/global.scss';

.button-gtc-rc{
  border: 0;
  font-size: $input-text-size;
  overflow: hidden;
  cursor: pointer;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.54px;
  text-align: center;
  border-radius: 3px;
}

//---------------------------------------------------------------------
//------------------------------- Primary -----------------------------
//---------------------------------------------------------------------

//------------------------------- px -----------------------------

.button-gtc-rc-primary-px {
  color: $text-color-white;
  background-color: $primary-color-px;
  //margin-left: 5px;

  &:hover {
    background-color: $primary-color-hover-px;
    transition: $transition
  }

  &:active {
    background-color: $primary-color-click-px;
    transition: $transition
  }
}

//------------------------------- pm -----------------------------

.button-gtc-rc-primary-pm {
  color: $text-color-white;
  background-color: $primary-color-pm;
  //margin-left: 5px;

  &:hover {
    background-color: $primary-color-hover-pm;
    transition: $transition
  }

  &:active {
    background-color: $primary-color-click-pm;
    transition: $transition
  }

}

//---------------------------------------------------------------------
//------------------------------- Secondary ---------------------------
//---------------------------------------------------------------------

//------------------------------- px -----------------------------

.button-gtc-rc-secondary-px {
  color: $text-color-black;
  background-color: $secondary-color-px;

  &:hover{
    background-color: $secondary-color-hover-pm;
    transition: $transition
  }

  &:active{
    background-color: $secondary-color-click-pm;
    transition: $transition
  }
}

//------------------------------- pm -----------------------------

.button-gtc-rc-secondary-pm {
  color: $text-color-black;
  background-color: $secondary-color-pm;

  &:hover{
    background-color: $secondary-color-hover-pm;
    transition: $transition
  }

  &:active{
    background-color: $secondary-color-click-pm;
    transition: $transition
  }
}

//---------------------------------------------------------------------
//------------------------------- Tertiary ----------------------------
//---------------------------------------------------------------------

//------------------------------- px -----------------------------

.button-gtc-rc-tertiary-px {
  color: $text-color-white;
  background-color: $primary-color-px;
  font-size: 11px !important;
  padding: 7px 16px !important;

  &:hover {
    background-color: $primary-color-hover-px;
    transition: $transition
  }

  &:active {
    background-color: $primary-color-click-px;
    transition: $transition
  }

}

//------------------------------- pm -----------------------------

.button-gtc-rc-tertiary-pm {
  color: $text-color-white;
  background-color: $primary-color-pm;
  font-size: 11px !important;
  padding: 7px 16px !important;

  &:hover {
    background-color: $primary-color-hover-pm;
    transition: $transition
  }

  &:active {
    background-color: $primary-color-click-pm;
    transition: $transition
  }
}

//---------------------------------------------------------------------
//------------------------------- Warning -----------------------------
//---------------------------------------------------------------------

//------------------------------- px -----------------------------

.button-gtc-rc-warning-px {
  color: $text-color-white;
  background-color: $warning-color;

  &:hover {
    color: $text-color-white !important;
    background-color: $warning-color-hover !important;
    transition: $transition
  }

  &:active {
    background-color: $warning-color-click;
    transition: $transition
  }
  
}

//------------------------------- pm -----------------------------

.button-gtc-rc-warning-pm {
  color: $text-color-white;
  background-color: $warning-color;

  :hover {
    color: $text-color-white !important;
    background-color: $warning-color-hover !important;
    transition: $transition
  }

  :active {
    background-color: $warning-color-click;
    transition: $transition
  }

}

//---------------------------------------------------------------------
//------------------------------- Green -----------------------------
//---------------------------------------------------------------------

//------------------------------- px -----------------------------

.button-gtc-rc-green-px {
  color: $text-color-white;
  background-color: $color-blue-gtc;

  &:hover {
    color: $text-color-white !important;
    background-color: $color-blue-gtc-hover !important;
    transition: $transition
  }

  &:active {
    background-color: $color-blue-gtc-click;
    transition: $transition
  }
  
}

//------------------------------- pm -----------------------------

.button-gtc-rc-green-pm {
  color: $text-color-white;
  background-color: $color-blue-gtc;

  :hover {
    color: $text-color-white !important;
    background-color: $color-blue-gtc-hover !important;
    transition: $transition
  }

  :active {
    background-color: $color-blue-gtc-click;
    transition: $transition
  }

}

//---------------------------------------------------------------------
//------------------------------- Sizes ----------------------------
//---------------------------------------------------------------------

.button-gtc-rc-xsmall {
  font-size: 10px;
  padding: 9px 12px;
}

.button-gtc-rc-small {
  font-size: 12px;
  padding: 10px 16px;
}

.button-gtc-rc-medium {
  font-size: $input-text-size;
  padding: 11px 20px;
}

.button-gtc-rc-large {
  font-size: 16px;
  padding: 12px 24px;
}

//---------------------------------------------------------------------
//------------------------------- Disabled -----------------------------
//---------------------------------------------------------------------

.button-gtc-rc-disabled {
  color: $disabled-text-color;
  background-color: $disabled-fill-color;
  cursor: no-drop;

  :hover {
    color: $disabled-text-color;
    background-color: $disabled-fill-color;
  }
}

//---------------------------------------------------------------------
//------------------------------- With Icon ---------------------------
//---------------------------------------------------------------------

.button-gtc-rc-addIconSearch {
  background-image: url(../../assets/icons/location.svg);
  background-repeat: no-repeat;
  background-position: 96% 50%;
}

.button-gtc-rc-content {
  display: flex;
  align-items: center;
}

.button-gtc-rc-text {
  height: 100%;
  width: 100%;
}

.button-gtc-rc-text-icon {
  margin-right: 20px;
}

.button-gtc-rc-icon {
  padding: 9px 10px !important;
}


// BUTTONS COLORS

.btn-red {
	border-radius: 3px;
	border: none;
	background-color: $color-button-red !important;
	color: $color-button-text-red !important;

	&:hover {
		background-color: $color-button-focused-red !important;
	}
}
