/*----------------------------------------------
*
* [Default Stylesheet]
*
* Theme    : Brilio - Personal Portfolio WordPress Theme
* Version  : 1.0
* Author   : Themeland
* Support  : hridoy1272@gmail.com
* 
----------------------------------------------*/

/*----------------------------------------------

[ALL CONTENTS]

1. Root
2. Button

----------------------------------------------*/

/*----------------------------------------------
1. Root
----------------------------------------------*/

/* #region Root */

:root {
  --primary-font: "Urbanist", sans-serif;
  --secondary-font: "Urbanist", sans-serif;

  --h1-size: 6rem;
  --h1-weight: 500;

  --h2-size: 4rem;
  --h2-weight: 500;

  --p-size: 1.2rem;
  --p-weight: 400;

  --header-bg-color: #030712;
  --nav-brand-height: 50px;
  --nav-item-color: #030712;
  --hero-bg-color: #030712;

  --primary-color: #5700ef;
  --secondary-color: #26c6da;

  --white-color: #f9f9f9;
  --black-color: #040402;
  --dark-grey-color: #191919;

  --primary-t-color: #ffffff;
  --primary-t-color-2: #b6bcc6;
  --secondary-t-color: #f9f9f9;
  --secondary-t-color-2: #a6abb4;
  --primary-p-color: #353941;
  --secondary-p-color: #909dac;
  --primary-b-color: #f5f5f5;
  --secondary-b-color: #8b8d92;
  --primary-l-color: rgba(152, 152, 152, 0.15);
  --secondary-l-color: rgba(255, 255, 255, 0.15);

  --box-shadow-color: rgba(9, 31, 67, 0.06);

  --valid-color: #007a4d;
  --invalid-color: #e34f4f;
  --neutral-color: #989898;

  --primary-bg-color: #f8f8f9;
  --primary-bg-color-2: #e8eaed;
  --primary-bg-color-3: #e5e5e5;

  --secondary-bg-color: #111013;
  --secondary-bg-color-2: #1c1b1e;
  --secondary-bg-color-3: #191919;

  --card-bg-color: #f4f3ff;
  --button-color: #030712;
  --button-color-dark: #565960;
  --button-hover-color: var(--primary-color);
  --fill-color: color-mix(in srgb, var(--neutral-color) 8%, transparent);

  --footer-bg-color: #000a1f;

  --border-radius-md: 10px;
  --border-radius-sm: calc(var(--border-radius-md) / 2);

  --transform-scale: scale3d(1.06, 1.06, 1.06);

  --transition-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-duration: 0.35s;
}

/* #endregion Root */

/*----------------------------------------------
2. Button
----------------------------------------------*/

/* #region Button */

.button,
a.button,
.added_to_cart,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  min-height: 3rem;
  padding: 0 1.25rem;
  background-color: var(--button-color);
  background-image: none;
  border: 2px solid transparent;
  border-radius: var(--border-radius-md);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--white-color);
  cursor: pointer;
  transition: all var(--transition-function) var(--transition-duration);
}

[data-theme="dark"] .button,
[data-theme="dark"] a.button,
[data-theme="dark"] .added_to_cart,
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] input[type="submit"] {
  --button-color: var(--button-color-dark);
}

.button:hover,
.button:active,
.button:focus,
a.button:hover,
a.button:active,
a.button:focus,
.added_to_cart:hover,
.added_to_cart:active,
.added_to_cart:focus,
button[type="submit"]:hover,
button[type="submit"]:active,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.button:focus,
.button:active,
a.button:focus,
a.button:active,
.added_to_cart:focus,
.added_to_cart:active,
button[type="submit"]:focus,
button[type="submit"]:active,
input[type="submit"]:focus,
input[type="submit"]:active {
  box-shadow: 0 0 0 0.3125rem
    color-mix(in srgb, var(--neutral-color) 15%, transparent);
}

.button svg,
a.button svg,
.added_to_cart svg,
button[type="submit"] svg,
input[type="submit"] svg {
  fill: currentColor;
}

.button.outlined,
a.button.outlined,
.added_to_cart.outlined,
button[type="submit"].outlined,
input[type="submit"].outlined {
  border-color: currentColor;
}

[data-theme="dark"] .button.outlined,
[data-theme="dark"] a.button.outlined,
[data-theme="dark"] .added_to_cart.outlined,
[data-theme="dark"] button[type="submit"].outlined,
[data-theme="dark"] input[type="submit"].outlined {
  border-color: var(--button-color-dark);
  color: var(--white-color);
}

.button.outlined,
.button.text,
.button.flat,
a.button.outlined,
a.button.text,
a.button.flat,
.added_to_cart.outlined,
.added_to_cart.text,
.added_to_cart.flat,
button[type="submit"].outlined,
button[type="submit"].text,
button[type="submit"].flat,
input[type="submit"].outlined,
input[type="submit"].text,
input[type="submit"].flat {
  background-color: transparent;
  color: var(--button-color);
}

[data-theme="dark"] .button.text,
[data-theme="dark"] a.button.text,
[data-theme="dark"] .added_to_cart.text,
[data-theme="dark"] button[type="submit"].text,
[data-theme="dark"] input[type="submit"].text {
  color: var(--white-color);
}

.button.outlined:hover,
.button.outlined:active,
.button.outlined:focus,
a.button.outlined:hover,
a.button.outlined:active,
a.button.outlined:focus,
.added_to_cart.outlined:hover,
.added_to_cart.outlined:active,
.added_to_cart.outlined:focus,
button[type="submit"].outlined:hover,
button[type="submit"].outlined:active,
button[type="submit"].outlined:focus,
input[type="submit"].outlined:hover,
input[type="submit"].outlined:active,
input[type="submit"].outlined:focus {
  border-color: currentColor;
}

.button.outlined:hover,
.button.outlined:active,
.button.outlined:focus,
.button.text:hover,
.button.text:active,
.button.text:focus,
.button.flat:hover,
.button.flat:active,
.button.flat:focus,
a.button.outlined:hover,
a.button.outlined:active,
a.button.outlined:focus,
a.button.text:hover,
a.button.text:active,
a.button.text:focus,
a.button.flat:hover,
a.button.flat:active,
a.button.flat:focus,
.added_to_cart.outlined:hover,
.added_to_cart.outlined:active,
.added_to_cart.outlined:focus,
.added_to_cart.text:hover,
.added_to_cart.text:active,
.added_to_cart.text:focus,
.added_to_cart.flat:hover,
.added_to_cart.flat:active,
.added_to_cart.flat:focus,
button[type="submit"].outlined:hover,
button[type="submit"].outlined:active,
button[type="submit"].outlined:focus,
button[type="submit"].text:hover,
button[type="submit"].text:active,
button[type="submit"].text:focus,
button[type="submit"].flat:hover,
button[type="submit"].flat:active,
button[type="submit"].flat:focus,
input[type="submit"].outlined:hover,
input[type="submit"].outlined:active,
input[type="submit"].outlined:focus,
input[type="submit"].text:hover,
input[type="submit"].text:active,
input[type="submit"].text:focus,
input[type="submit"].flat:hover,
input[type="submit"].flat:active,
input[type="submit"].flat:focus {
  color: var(--primary-color);
}

.button.flat:hover,
.button.flat:active,
.button.flat:focus,
a.button.flat:hover,
a.button.flat:active,
a.button.flat:focus,
.added_to_cart.flat:hover,
.added_to_cart.flat:active,
.added_to_cart.flat:focus,
button[type="submit"].flat:hover,
button[type="submit"].flat:active,
button[type="submit"].flat:focus,
input[type="submit"].flat:hover,
input[type="submit"].flat:active,
input[type="submit"].flat:focus {
  background-color: var(--primary-bg-color);
}

.button.text,
a.button.text,
.added_to_cart.text,
button[type="submit"].text,
input[type="submit"].text {
  padding: 0;
  min-height: initial;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 0.5rem transparent;
  font-size: 1em;
  transition-delay: 0s !important;
}

.button.text:hover,
.button.text:active,
.button.text:focus,
a.button.text:hover,
a.button.text:active,
a.button.text:focus,
.added_to_cart.text:hover,
.added_to_cart.text:active,
.added_to_cart.text:focus,
button[type="submit"].text:hover,
button[type="submit"].text:active,
button[type="submit"].text:focus,
input[type="submit"].text:hover,
input[type="submit"].text:active,
input[type="submit"].text:focus {
  background-color: var(--fill-color);
  box-shadow: 0 0 0 0.6rem var(--fill-color);
}

.brilio-align-left {
  text-align: left;
}

.brilio-align-right {
  text-align: right;
}

.brilio-align-center {
  text-align: center;
}

.brilio-align-justify .button {
  width: 100%;
}

.btn-smaller {
  padding: 12px 18px;
  font-size: 0.9rem;
}

.btn:hover .btn-text {
  -webkit-animation: MoveScaleUpInitial 0.25s forwards,
    MoveScaleUpEnd 0.25s forwards 0.25s;
  animation: MoveScaleUpInitial 0.25s forwards,
    MoveScaleUpEnd 0.25s forwards 0.25s;
}

/* #endregion Button */