:root {
  --goarn-color-surface: #fff;
  --goarn-color-background: #f9fbfb;
  --goarn-color-text: #343741;
  --goarn-color-text-contrast: #fff;
  --goarn-color-primary: #4482cd;
  --goarn-color-secondary: #5745ba;
  --goarn-color-success: #21704a;
  --goarn-color-info: #4bafff;
  --goarn-color-warning: #ab3f23;
  --goarn-color-error: #bd271e;
  --goarn-color-border: #d3dae6;
  --goarn-color-disabled: #69707d;
  --goarn-color-disabled-background: #dcdfe4;
  --goarn-color-active: #ff8c00;
  --goarn-color-inactive: #828ed6;
  --goarn-radius-small: 0.25rem;
  --goarn-radius-medium: 0.5rem;
  --goarn-radius-large: 1rem;
  --goarn-radius-extralarge: 1.5rem;
  --goarn-radius-rounded: 50%;
  --goarn-shadow: 0px 0px 0.5rem 0px #0000001f;
  --goarn-appbar-height: 5rem;
  --goarn-navmenu-width: 4rem;
}

[variant="filled"] {
  border: 1px solid black;
  border-radius: var(--goarn-radius-small);
  outline: none;

  &[color="surface"] {
    color: var(--goarn-color-text);
    background-color: var(--goarn-color-surface);
    border-color: var(--goarn-color-surface);
  }

  &[color="primary"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-primary);
    border-color: var(--goarn-color-primary);
  }

  &[color="secondary"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-secondary);
    border-color: var(--goarn-color-secondary);
  }

  &[color="success"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-success);
    border-color: var(--goarn-color-success);
  }

  &[color="info"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-info);
    border-color: var(--goarn-color-info);
  }

  &[color="warning"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-warning);
    border-color: var(--goarn-color-warning);
  }

  &[color="error"] {
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-error);
    border-color: var(--goarn-color-error);
  }
}

[variant="outlined"] {
  background-color: var(--goarn-color-surface);
  color: var(--goarn-color-text);
  border: 1px solid black;
  border-radius: var(--goarn-radius-small);
  outline: none;

  &[color="surface"] {
    border-color: var(--goarn-color-border);
  }

  &[color="primary"] {
    border-color: var(--goarn-color-primary);
  }

  &[color="secondary"] {
    border-color: var(--goarn-color-secondary);
  }

  &[color="success"] {
    border-color: var(--goarn-color-success);
  }

  &[color="info"] {
    border-color: var(--goarn-color-info);
  }

  &[color="warning"] {
    border-color: var(--goarn-color-warning);
  }

  &[color="error"] {
    border-color: var(--goarn-color-error);
  }
}

[variant="text"] {
  background-color: transparent;
  border: none;
  outline: none;

  &[color="surface"] {
    color: var(--goarn-color-text);
  }

  &[color="primary"] {
    color: var(--goarn-color-primary);
  }

  &[color="secondary"] {
    color: var(--goarn-color-secondary);
  }

  &[color="success"] {
    color: var(--goarn-color-success);
  }

  &[color="info"] {
    color: var(--goarn-color-info);
  }

  &[color="warning"] {
    color: var(--goarn-color-warning);
  }

  &[color="error"] {
    color: var(--goarn-color-error);
  }
}

[variant="gradient"] {
  color: var(--goarn-color-text);
  border-radius: var(--goarn-radius-small);
  border: none;
  outline: none;

  &[color="primary"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-primary) -50%,
      var(--goarn-color-surface) 50%
    );
  }

  &[color="secondary"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-secondary) -50%,
      var(--goarn-color-surface) 50%
    );
  }

  &[color="success"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-success) -50%,
      var(--goarn-color-surface) 50%
    );
  }

  &[color="info"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-info) -50%,
      var(--goarn-color-surface) 50%
    );
  }

  &[color="warning"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-warning) -50%,
      var(--goarn-color-surface) 50%
    );
  }

  &[color="error"] {
    background: linear-gradient(
      180deg,
      var(--goarn-color-error) -50%,
      var(--goarn-color-surface) 50%
    );
  }
}

[contrast] {
  &[variant="text"] {
    color: var(--goarn-color-text-contrast);
  }
}

[disabled] {
  cursor: not-allowed !important;

  &[variant="filled"] {
    background-color: var(--goarn-color-disabled-background) !important;
    border-color: var(--goarn-color-disabled-background) !important;
    color: var(--goarn-color-disabled) !important;
  }

  &[variant="outlined"] {
    background-color: var(--goarn-color-disabled-background) !important;
    border-color: var(--goarn-color-disabled) !important;
    color: var(--goarn-color-disabled) !important;
  }

  &[variant="text"] {
    color: var(--goarn-color-disabled-background) !important;
  }
}

[tooltip] {
  position: relative;
  cursor: pointer;

  &:before,
  &:after {
    position: absolute;
    display: none;
    margin: 0;
  }

  &:hover:before,
  &:hover:after {
    display: block;
  }

  &:before {
    content: attr(tooltip);
    padding: 0.25rem 0.5rem;
    min-width: max-content;
    border-radius: var(--goarn-radius-small);
    color: var(--goarn-color-text-contrast);
    background-color: var(--goarn-color-text);
    text-align: center;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 400;
  }

  &:after {
    content: "";
    border: 10px solid transparent;
  }

  &:not([tooltippos]),
  &[tooltippos="top"] {
    &:before,
    &:after {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    &:before {
      margin-bottom: 1rem;
    }

    &:after {
      border-top-color: var(--goarn-color-text);
    }
  }

  &[tooltippos="right"] {
    &:before,
    &:after {
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
    }

    &:before {
      margin-left: 1rem;
    }

    &:after {
      border-right-color: var(--goarn-color-text);
    }
  }

  &[tooltippos="bottom"] {
    &:before,
    &:after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    &:before {
      margin-top: 1rem;
    }

    &:after {
      border-bottom-color: var(--goarn-color-text);
    }
  }
}