goaster-css.templ

package goaster

templ GoasterCSS() {
	<style type="text/css">
    * {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
    }

    :root {
        /* - Color Shades - */
      --gtt-color-space: oklab;

        /* - Default Level - */
      --gtt-default-base: hsl(220deg 9% 46%);
      --gtt-default-lightest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 10%,
        white
      );
      --gtt-default-lighter: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 30%,
        white
      );
      --gtt-default-light: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 70%,
        white
      );
      --gtt-default-dark: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 70%,
        black
      );
      --gtt-default-darker: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 30%,
        black
      );
      --gtt-default-darkest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-default-base) 10%,
        black
      );
      /* - Success Level - */
      --gtt-success-base: hsl(142deg 71% 45%);
      --gtt-success-lightest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 10%,
        white
      );
      --gtt-success-lighter: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 30%,
        white
      );
      --gtt-success-light: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 70%,
        white
      );
      --gtt-success-dark: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 70%,
        black
      );
      --gtt-success-darker: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 30%,
        black
      );
      --gtt-success-darkest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-success-base) 10%,
        black
      );
      /* - Error Level - */
      --gtt-error-base: hsl(0deg 84% 60%);
      --gtt-error-lightest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 10%,
        white
      );
      --gtt-error-lighter: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 30%,
        white
      );
      --gtt-error-light: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 70%,
        white
      );
      --gtt-error-dark: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 70%,
        black
      );
      --gtt-error-darker: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 30%,
        black
      );
      --gtt-error-darkest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-error-base) 10%,
        black
      );
      /* - Warning Level - */
      --gtt-warning-base: hsl(25deg 95% 53%);
      --gtt-warning-lightest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 10%,
        white
      );
      --gtt-warning-lighter: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 30%,
        white
      );
      --gtt-warning-light: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 70%,
        white
      );
      --gtt-warning-dark: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 70%,
        black
      );
      --gtt-warning-darker: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 30%,
        black
      );
      --gtt-warning-darkest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-warning-base) 10%,
        black
      );
      /* - Info Level - */
      --gtt-info-base: hsl(217deg 91% 60%);
      --gtt-info-lightest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 10%,
        white
      );
      --gtt-info-lighter: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 30%,
        white
      );
      --gtt-info-light: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 70%,
        white
      );
      --gtt-info-dark: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 70%,
        black
      );
      --gtt-info-darker: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 30%,
        black
      );
      --gtt-info-darkest: color-mix(
        in var(--gtt-color-space),
        var(--gtt-info-base) 10%,
        black
      );

      /* Padding Y and X for the toast element */
      --gtt-py: 0;
      --gtt-px: 0.75em;

      --gtt-bg: var(--gtt-default-bg);
      --gtt-progress-bar-color: var(--gtt-default-progress-bar-color);

      /* Font styling for the toast text */
      --gtt-color: var(--gtt-default-color);
      --gtt-font-family: inherit;
      --gtt-font-size: 1rem;
      --gtt-line-height: 1rem;
      /* Border styling for the toast */
      --gtt-border-width: 1px;
      --gtt-border-style: solid;
      --gtt-border-color: var(--gtt-default-border-color);
      --gtt-border-radius: 0.375rem;

      /* Accent toast theme colors */
      --gtt-accent-light-bg: white;

      /* Dark accent toast theme colors */
      --gtt-accent-dark-bg: hsla(220.9, 39.3%, 11%, 0.85);

      /* Default toast theme colors (border, background, text color) */
      --gtt-default-border-color: var(--gtt-default-lighter);
      --gtt-default-bg: var(--gtt-default-lightest);
      --gtt-default-color: var(--gtt-default-dark);
      --gtt-default-progress-bar-color: var(--gtt-default-light);
      --gtt-default-accent-color: var(--gtt-default-dark);
      --gtt-default-accent-dark-color: var(--gtt-default-light);

      /* Success toast theme colors (border, background, text color) */
      --gtt-success-border-color: var(--gtt-success-lighter);
      --gtt-success-bg: var(--gtt-success-lightest);
      --gtt-success-color: var(--gtt-success-dark);
      --gtt-success-progress-bar-color: var(--gtt-success-light);
      --gtt-success-accent-color: var(--gtt-success-dark);
      --gtt-success-accent-dark-color: var(--gtt-success-light);

      /* Error toast theme colors (border, background, text color) */
      --gtt-error-border-color: var(--gtt-error-lighter);
      --gtt-error-bg: var(--gtt-error-lightest);
      --gtt-error-color: var(--gtt-error-dark);
      --gtt-error-progress-bar-color: var(--gtt-error-light);
      --gtt-error-accent-color: var(--gtt-error-dark);
      --gtt-error-accent-dark-color: var(--gtt-error-light);

      /* Warning toast theme colors (border, background, text color) */
      --gtt-warning-border-color: var(--gtt-warning-lighter);
      --gtt-warning-bg: var(--gtt-warning-lightest);
      --gtt-warning-color: var(--gtt-warning-dark);
      --gtt-warning-progress-bar-color: var(--gtt-warning-light);
      --gtt-warning-accent-color: var(--gtt-warning-dark);
      --gtt-warning-accent-dark-color: var(--gtt-warning-light);

      /* Info toast theme colors (border, background, text color) */
      --gtt-info-border-color: var(--gtt-info-lighter);
      --gtt-info-bg: var(--gtt-info-lightest);
      --gtt-info-color: var(--gtt-info-dark);
      --gtt-info-progress-bar-color: var(--gtt-info-light);
      --gtt-info-accent-color: var(--gtt-info-dark);
      --gtt-info-accent-dark-color: var(--gtt-info-light);

      /* Default entrance animation properties */
      --gtt-animation-entrance-duration: 0.5s;
      --gtt-animation-entrance-direction: normal;
      --gtt-animation-entrance-timing-fn: ease;
      --gtt-animation-entrance-delay: 0s;

      /* Default exit animation properties */
      --gtt-animation-exit-duration: 0.5s;
      --gtt-animation-exit-direction: normal;
      --gtt-animation-exit-timing-fn: ease;
      --gtt-animation-exit-delay: 0s;

      /* Animation properties (names) when entrance direction is from the top */
      --gtt-animation-entrance-name-top: gttFadeInDown;
      --gtt-animation-exit-name-top: gttFadeOutUp;

      /* Animation properties (names) when entrance direction is from the bottom */
      --gtt-animation-entrance-name-bottom: gttFadeInUp;
      --gtt-animation-exit-name-bottom: gttFadeOutDown;
    }

    button[class^="gttCloseBtn"]:hover,
    button[class^="gttCloseBtn"]:focus {
      background-color: var(--gtt-border-color);
    }

    /* Define the animation properties for a toast element's exit animation */
    .gttClose {
      animation-duration: var(--gtt-animation-exit-duration);
      animation-timing-function: var(--gtt-animation-exit-timing-fn);
      animation-delay: var(--gtt-animation-exit-delay);
      animation-direction: var(--gtt-animation-exit-direction);
    }

    .gttCloseFromTop {
      animation-name: var(--gtt-animation-exit-name-top);
    }

    .gttCloseFromBottom {
      animation-name: var(--gtt-animation-exit-name-bottom);
    }

    /* Animations */
    @keyframes gttFadeInUp {
      from {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
      }

      to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes gttFadeInDown {
      from {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
      }

      to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes gttFadeOutUp {
      from {
        opacity: 1;
      }

      to {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
      }
    }

    @keyframes gttFadeOutDown {
      from {
        opacity: 1;
      }

      to {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
      }
    }
  </style>
}

css gttContainer() {
	position: fixed;
	z-index: 1000;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	max-height: 90%;
	overflow-y: auto;
	font-family: var(--gtt-font-family);
	font-size: var(--gtt-font-size);
	line-height: var(--gtt-line-height);
}

css gttContainerBottomRight() {
	right: 15px;
	bottom: 15px;
	align-items: flex-end;
}

css gttContainerBottomLeft() {
	left: 15px;
	bottom: 15px;
	align-items: flex-start;
}

css gttContainerBottomCenter() {
	left: 50%;
	bottom: 15px;
	transform: translateX(-50%);
	align-items: center;
}

css gttContainerTopRight() {
	right: 15px;
	top: 15px;
	align-items: flex-end;
}

css gttContainerTopLeft() {
	left: 15px;
	top: 15px;
	align-items: flex-start;
}

css gttContainerTopCenter() {
	left: 50%;
	top: 15px;
	transform: translateX(-50%);
	align-items: center;
}

css gttToast() {
	position: relative;
	min-width: 250px;
	margin-top: 0.5rem;
	background-color: var(--gtt-bg);
	color: var(--gtt-color);
	border-color: var(--gtt-border-color);
	padding: var(--gtt-py) var(--gtt-px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

css gttRounded() {
	border-radius: var(--gtt-border-radius);
}

css gttBordered() {
	border-style: var(--gtt-border-style);
	border-width: var(--gtt-border-width);
}

css gttAccent() {
	border: 0;
	border-left-width: 4px;
	border-left-style: solid;
}

css gttAnimated() {
	animation-duration: var(--gtt-animation-entrance-duration);
	animation-direction: var(--gtt-animation-entrance-direction);
	animation-timing-function: var(--gtt-animation-entrance-timing-fn);
	animation-delay: var(--gtt-animation-entrance-delay);
}

css gttShow() {
	visibility: visible;
}

css gttShowFromTop() {
	animation-name: var(--gtt-animation-entrance-name-top);
}

css gttShowFromBottom() {
	animation-name: var(--gtt-animation-entrance-name-bottom);
}

css gttProgressBar() {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 4px;
	background-color: var(--gtt-progress-bar-color);
	width: 100%;
	transition: width linear;
}

css gttDefaultLevel() {
	--gtt-color: var(--gtt-default-color);
	--gtt-bg: var(--gtt-default-bg);
	--gtt-border-color: var(--gtt-default-border-color);
	--gtt-progress-bar-color: var(--gtt-default-progress-bar-color);
}

css gttAccentDefaultLevel() {
	border-left-color: var(--gtt-default-accent-border-color, #6b7280);
}

css gttAccentLightDefaultLevel() {
	--gtt-color: var(--gtt-default-accent-color);
	--gtt-bg: var(--gtt-accent-light-bg);
	--gtt-border-color: var(--gtt-default-border-color);
	border-left-color: var(--gtt-default-accent-border-color, #6b7280);
}

css gttAccentDarkDefaultLevel() {
	--gtt-color: var(--gtt-default-accent-dark-color);
	--gtt-bg: var(--gtt-accent-dark-bg);
	--gtt-border-color: var(--gtt-default-border-color);
	border-left-color: var(--gtt-success-accent-border-color, #6b7280);
}

css gttSuccessLevel() {
	--gtt-color: var(--gtt-success-color);
	--gtt-bg: var(--gtt-success-bg);
	--gtt-border-color: var(--gtt-success-border-color);
	--gtt-progress-bar-color: var(--gtt-success-progress-bar-color);
}

css gttAccentSuccessLevel() {
	border-left-color: var(--gtt-success-accent-dark-color, #22c55e);
}

css gttAccentLightSuccessLevel() {
	--gtt-color: var(--gtt-success-accent-color);
	--gtt-bg: var(--gtt-accent-light-bg);
	--gtt-border-color: var(--gtt-success-border-color);
	border-left-color: var(--gtt-success-accent-dark-color, #22c55e);
}

css gttAccentDarkSuccessLevel() {
	--gtt-color: var(--gtt-success-accent-dark-color);
	--gtt-bg: var(--gtt-accent-dark-bg);
	--gtt-border-color: var(--gtt-success-border-color);
	border-left-color: var(--gtt-success-accent-border-color, #22c55e);
}

css gttErrorLevel() {
	--gtt-color: var(--gtt-error-color);
	--gtt-bg: var(--gtt-error-bg);
	--gtt-border-color: var(--gtt-error-border-color);
	--gtt-progress-bar-color: var(--gtt-error-progress-bar-color);
}

css gttAccentErrorLevel() {
	border-left-color: var(--gtt-error-accent-border-color, #ef4444);
}

css gttAccentLightErrorLevel() {
	--gtt-color: var(--gtt-error-accent-color);
	--gtt-bg: var(--gtt-accent-light-bg);
	--gtt-border-color: var(--gtt-error-border-color);
	border-left-color: var(--gtt-error-accent-border-color, #ef4444);
}

css gttAccentDarkErrorLevel() {
	--gtt-color: var(--gtt-error-accent-dark-color);
	--gtt-bg: var(--gtt-accent-dark-bg);
	--gtt-border-color: var(--gtt-error-border-color);
	border-left-color: var(--gtt-error-accent-border-color, #ef4444);
}

css gttWarningLevel() {
	--gtt-color: var(--gtt-warning-color);
	--gtt-bg: var(--gtt-warning-bg);
	--gtt-border-color: var(--gtt-warning-border-color);
	--gtt-progress-bar-color: var(--gtt-warning-progress-bar-color);
}

css gttAccentWarningLevel() {
	border-left-color: var(--gtt-warning-accent-border-color, #f97316);
}

css gttAccentLightWarningLevel() {
	--gtt-color: var(--gtt-warning-accent-color);
	--gtt-bg: var(--gtt-accent-light-bg);
	--gtt-border-color: var(--gtt-warning-border-color);
	border-left-color: var(--gtt-warning-accent-border-color, #f97316);
}

css gttAccentDarkWarningLevel() {
	--gtt-color: var(--gtt-warning-accent-dark-color);
	--gtt-bg: var(--gtt-accent-dark-bg);
	--gtt-border-color: var(--gtt-warning-border-color);
	border-left-color: var(--gtt-warning-accent-border-color, #f97316);
}

css gttInfoLevel() {
	--gtt-color: var(--gtt-info-color);
	--gtt-bg: var(--gtt-info-bg);
	--gtt-border-color: var(--gtt-info-border-color);
	--gtt-progress-bar-color: var(--gtt-info-progress-bar-color);
}

css gttAccentInfoLevel() {
	border-left-color: var(--gtt-info-accent-border-color, #3b82f6);
}

css gttAccentLightInfoLevel() {
	--gtt-color: var(--gtt-info-accent-color);
	--gtt-bg: var(--gtt-accent-light-bg);
	--gtt-border-color: var(--gtt-info-border-color);
	border-left-color: var(--gtt-info-accent-border-color, #3b82f6);
}

css gttAccentDarkInfoLevel() {
	--gtt-color: var(--gtt-info-accent-dark-color);
	--gtt-bg: var(--gtt-accent-dark-bg);
	--gtt-border-color: var(--gtt-info-border-color);
	border-left-color: var(--gtt-info-accent-border-color, #3b82f6);
}

css gttIcon() {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
}

css gttMessage() {
	margin: 1em 0 1em 0.75em;
}

css gttCloseBtn() {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	background-color: transparent;
	border: none;
	border-radius: 1e5px;
	aspect-ratio: 1;
	color: inherit;
	cursor: pointer;
	transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

css gttSrOnly() {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}