:root {
  --theme-primary: #6200ee;
}

@font-face {
  src: url("./Roboto.ttf");
  font-family: Roboto;
}

material *:not(icon, [nostyle]) {
  font-family: Roboto, sans-serif;
}

material *[fullwidth]:not([nostyle]) {
  width: 100%;
}

material div.ripple {
  position: absolute;
  transform: scale(0);
  animation: ripple 400ms linear;
  border-radius: 50%;
  background-color: rgba(222, 222, 222, 0.6);
  aspect-ratio: 1;
}

@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/** BEGIN MAIN **/

/* #region Buttons */

material button:not([nostyle]) {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  min-width: 64px;
  height: 36px;
  overflow: hidden;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.0892857143em;
  text-transform: uppercase;
}

material button:not([nostyle]):disabled {
  cursor: initial;
  color: rgba(0, 0, 0, 0.38) !important;
}

material button:not([nostyle]):has(icon[leading]:not([nostyle])) {
  padding-left: 12px;
}

material button:not([nostyle]) > icon[leading]:not([nostyle]) {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  font-size: 18px;
}

material button:not([nostyle]):has(icon[trailing]:not([nostyle])) {
  padding-right: 12px;
}

material button:not([nostyle]) > icon[trailing]:not([nostyle]) {
  margin-left: 8px;
  width: 18px;
  height: 18px;
  font-size: 18px;
}

material button[variant="contained"]:not([nostyle]) {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border: none;
  background-color: var(--theme-primary);
  padding: 0 16px 0 16px;
  color: #fff;
}

material button[variant="contained"]:not([disabled], [nostyle]):hover {
  background-color: #6e14ef;
}

material button[variant="contained"]:not([nostyle]):disabled {
  box-shadow: none;
  background-color: #dcdcdc;
}

material button[variant="outlined"]:not([nostyle]) {
  border: 1px solid #dcdcdc;
  background-color: transparent;
  padding: 0 16px 0 16px;
  color: var(--theme-primary);
}

material button[variant="outlined"]:not([disabled], [nostyle]):hover {
  background-color: #f4f0fa;
}

material button[variant="text"]:not([nostyle]) {
  border: none;
  background-color: transparent;
  padding: 0 8px 0 8px;
  color: var(--theme-primary);
}

material button[variant="text"]:not([disabled], [nostyle]):hover {
  background-color: #e8e2ed;
}

/* #endregion */

/* #region FAB */

material fab:not([nostyle]) {
  display: flex;
  position: absolute;
  right: 16px;
  bottom: 16px;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  padding: 0 16px 0 16px;
  aspect-ratio: 1;
  width: 56px;
  overflow: hidden;
  user-select: none;
}

material fab:not([disabled], [nostyle]):hover {
  background-color: #6e14ef;
}

material fab:not([nostyle]) > icon {
  color: #fff;
}

/* #endregion */

/* #region Linear Progress */

@keyframes linear-progress-1 {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes linear-progress-2 {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

/** Track */
material linear-progress:not([nostyle]) {
  display: block;
  background-color: #d7b7fd;
  width: 240px;
  height: 4px;
  position: absolute;
  overflow: hidden;
}

/** Pseudos */
material linear-progress:not([nostyle])::after,
material linear-progress[indeterminate]:not([nostyle])::before {
  display: block;
  background-color: var(--theme-primary);
  height: 4px;
  content: "";
}

/** Determinate Pseudo */
material linear-progress:not([indeterminate], [nostyle])::after {
  width: calc(var(--progress) * 100%);
  transition: width 250ms;
}

/** Indeterminate Pseudo 1 */
material linear-progress[indeterminate]:not([nostyle])::before {
  animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running linear-progress-1;
  position: absolute;
}

/** Indeterminate Pseudo 2 */
material linear-progress[indeterminate]:not([nostyle])::after {
  animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running linear-progress-2;
  position: absolute;
}

/* #endregion */