/* link na prohlížení ikon -> https://icons.getbootstrap.com */

/*-------Colors-------*/
:root{
  --btn-color: rgba(105, 108, 255, 1);
  --btn-text: #fff;
  --btn-hover: rgba(89, 92, 217, 1);
  --btn-hover-text:#fff;
  
  --test-btn-color: rgba(105, 108, 255, 1);
  --test-btn-text: #fff;
  --test-btn-hover: rgba(89, 92, 217, 1);
  --test-btn-hover-text:#fff;

  --btn-color-dark: rgba(89, 92, 217, 1);
  --btn-color-shadow: rgba(105, 108, 255, 0.4);
}


/*-------main-buttons-------*/
.btn-primary {
  color: var(--btn-text);
  background-color: var(--btn-color);
  box-shadow: 0 0.125rem 0.25rem 0 var(--btn-color-shadow);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--btn-color);
  padding: 0.4375rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.btn-outline-primary {
  color: var(--btn-color);
  border-color: var(--btn-color);
  background: transparent;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid;
  padding: 0.4375rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  
}

.btn-icon {
  padding: 0;
  width: calc(2.309375rem + 2px);
  height: calc(2.309375rem + 2px);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}


/*-------Rounded button-------*/
.rounded-pill {
  border-radius: 50rem !important;
}


/*-------Buttons size-------*/
.btn-xl, .btn-group-xl > .btn {
  padding: 0.875rem 2.125rem;
  font-size: 1.25rem;
  border-radius: 0.625rem;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.6875rem;
  font-size: 0.75rem;
  border-radius: 0.25rem 
}

.btn-xs, .btn-group-xs > .btn {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.125rem;
}


/*------hover-------*/
.btn-primary:hover,
.btn-outline-primary:hover {
  color: var(--btn-hover-text);
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
  transform: translateY(-1px);
}


/*------checked, disabled-------*/
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--btn-color-dark);
  border-color: var(--btn-color-dark);
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--btn-text);
  background-color: var(--btn-color);
  border-color: var(--btn-color);
  pointer-events: none;
  opacity: 0.65;
}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--btn-color-dark);
  border-color: var(--btn-color-dark);
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}


/*-------Button group-------*/
.btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


/*-------Block level buttons-------*/
.gap-2 {
  gap: 0.5rem !important;
}

.d-grid {
  display: grid !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

/*-------test btn-------*/
.test-btn{
  color: var(--test-btn-text);
  background-color: var(--test-btn-color);
  box-shadow: 0 0.125rem 0.25rem 0 var(--btn-color-shadow);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--test-btn-color);
  padding: 0.4375rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;   
}

.test-btn:hover {
  color: var(--test-btn-hover-text);
  background-color: var(--test-btn-hover);
  border-color: var(--test-btn-hover);
  transform: translateY(-1px);
}

.test-btn-display{
  display: flex;
}

.test-btn-custom-size {
  font-size: 35px; 
  padding: 20px 150px; 
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}