/**
 * Main file to define styles for buttons.
 *
 * Default styles for buttons are defined via theme.json file. This file defines the rest of the styles
 * for buttons that can not be defined via theme.json.
 *
 * author Vladimir
 * version 1.0
 */

/**
 *
 * Generic styles for all buttons.
 *
 */
.wp-block-button {
	transition: var(--transition);

	& > .wp-block-button__link {
		display: flex;
		align-items: center;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) 12px;

		&:hover {
			text-decoration: none;
			outline: none;
		}

		&:focus,
		&:active {
			text-decoration: none;
		}
	}
}

/**
 *
 * Filled button styles.
 *
 * 1. Defines styles for the svg icon color change for normal and hover state.
 * 2. Defines styles for the disabled state.
 *
 */
.wp-block-button.is-style-fill
	> .wp-block-button__link:not(.has-text-color, .has-background) {
	&:disabled,
	&[disabled],
	&.disabled {
		background-color: #6e6e6e;
		color: #fff;
		border-color: #6e6e6e;
		cursor: not-allowed;
		pointer-events: all !important;
	}
}

/**
 *
 * Outline button styles.
 *
 * 1. Defines styles for outline button states.
 * 2. Defines styles for the svg icon color change for normal and hover state.
 * 3. Defines styles for the disabled state.
 *
 */
.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-text-color, .has-background) {
		background-color: transparent;
		color: var(--wp--preset--color--primary);
		border-color: var(--wp--preset--color--primary);

	&:hover,
	&:active,
	&.active {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--primary);
	}

	&:focus,
	&.focus {
		background-color: transparent;
		color: oklch( from var(--wp--preset--color--primary) calc(l * .7) c h );
		border-color: oklch( from var(--wp--preset--color--primary) calc(l * .7) c h );
	}

	&:disabled,
	&[disabled],
	&.disabled {
		background-color: #6e6e6e;
		color: #fff;
		border-color: #6e6e6e;
		cursor: not-allowed;
		pointer-events: all !important;
	}
}

/**
 *
 * Ghost button styles.
 *
 * 1. Defines generic styles for ghost button.
 * 2. Defines styles for ghost button states.
 * 3. Defines styles for the svg icon color change for normal and hover state.
 * 4. Defines styles for the disabled state.
 *
 */
.wp-block-button.is-style-ghost
	> .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	border-color: transparent;
	font-size: 1.75rem;
	line-height: 24px;
	padding: var(--wp--preset--spacing--20);

	&:after {
		content: '';
		background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon / icon-arrow-forward Copy 6'%3E%3Cpath id='Shape' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='%23080125'/%3E%3Cmask id='mask0_28_1895' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath id='Shape_2' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_28_1895)'%3E%3Crect id='BG' x='-4' y='-4' width='24' height='24' fill='%23621BFB'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
		width: 16px;
		height: 16px;
		margin-left: 9px;
	}

	&:hover,
	&:active,
	&.active {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--primary);

		&:after {
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon / icon-arrow-forward Copy 6'%3E%3Cpath id='Shape' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='%23080125'/%3E%3Cmask id='mask0_28_1904' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath id='Shape_2' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_28_1904)'%3E%3Crect id='BG' x='-4' y='-4' width='24' height='24' fill='white'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
		}
	}

	&:focus,
	&.focus {
		background-color: oklch( from var(--wp--preset--color--primary) calc(l * .7) c h );
		color: var(--wp--preset--color--white);
		border-color: oklch( from var(--wp--preset--color--primary) calc(l * .7) c h );

		&:after {
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon / icon-arrow-forward Copy 6'%3E%3Cpath id='Shape' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='%23080125'/%3E%3Cmask id='mask0_28_1904' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath id='Shape_2' d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_28_1904)'%3E%3Crect id='BG' x='-4' y='-4' width='24' height='24' fill='white'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
		}
	}

	&:disabled,
	&[disabled],
	&.disabled {
		background-color: #6e6e6e;
		color: #fff;
		border-color: #6e6e6e;
		cursor: not-allowed;
		pointer-events: all !important;

		&:after {
			content: '';
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='102' height='82' viewBox='0 0 102 82' fill='none'%3E%3Cpath d='M71.9629 0.459615L51.1781 21.2526L30.3492 0.409909L0.31201 30.459L21.1465 51.2962L51.1339 81.2956L51.1781 81.3453L102 30.5032L71.9629 0.459615Z' fill='%23E0E0E0'%3E%3C/path%3E%3C/svg%3E");
			display: inline-block;
			width: 1.375rem;
			height: 1.375rem;
			margin-left: 0.625rem;
		}

		&:hover {
			&:after {
				transform: none;
			}
		}
	}
}

/**
 *
 * Link Back button styles.
 *
 * 1. Defines generic styles for link back button.
 * 2. Defines styles for link back button states.
 * 3. Defines styles for the disabled state.
 *
 */
 .wp-block-button.is-style-link-back
 > .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: transparent;
 	color: var(--wp--preset--color--black);
 	border: none;
	line-height: 37px;
 	font-size: 21px;
 	padding: 0;
	margin-bottom: 5px;

	@media only screen and (min-width: 1024px) {
 		font-size: 1.5rem;
	}

 	&:before {
		content: '';
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath fill='%23621BFB' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'%3E%3C/path%3E%3C/svg%3E");
	 	width: 24px;
	 	height: 24px;
	 	margin-right: 3px;
		margin-bottom: 4px;
		margin-left: 1px;
 	}

 &:hover,
 &:active,
 &.active {
	 background-color: transparent;
	 color: var(--wp--preset--color--primary);
 }

 &:focus,
 &.focus {
	 background-color: transparent;
	 color: oklch( from var(--wp--preset--color--primary) calc(l * .7) c h );
 }

 &:disabled,
 &[disabled],
 &.disabled {
	 color: #6e6e6e;
	 cursor: not-allowed;
	 pointer-events: all !important;

	 &:before {
		 content: '';
		 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath fill='%23666' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'%3E%3C/path%3E%3C/svg%3E");
		 display: inline-block;
		 width: 24px;
		 height: 24px;
		 margin-right: 5px;
	 }

	 &:hover {
		 &:after {
			 transform: none;
		 }
	 }
 }
}

/**
 *
 * Fill button styles.
 *
 * 1. Defines styles for fill button states.
 * 2. Defines styles for the disabled state.
 *
 */
 .wp-block-button.is-style-fill-pink
 > .wp-block-button__link:not(.has-text-color, .has-background) {
	 background-color: var(--wp--preset--color--secondary);
	 color: var(--wp--preset--color--white);
	 border-color: var(--wp--preset--color--secondary);

 &:hover,
 &:active,
 &.active {
	 background-color: transparent;
	 color: var(--wp--preset--color--secondary);
	 border-color: var(--wp--preset--color--secondary);
 }

 &:focus,
 &.focus {
	 background-color: transparent;
	 color: oklch( from var(--wp--preset--color--secondary) calc(l * .7) c h );
	 border-color: oklch( from var(--wp--preset--color--secondary) calc(l * .7) c h );
 }

 &:disabled,
 &[disabled],
 &.disabled {
	 background-color: #6e6e6e;
	 color: #fff;
	 border-color: #6e6e6e;
	 cursor: not-allowed;
	 pointer-events: all !important;
 }
}

/**
 *
 * Outline button styles.
 *
 * 1. Defines styles for outline button states.
 * 2. Defines styles for the disabled state.
 *
 */
 .wp-block-button.is-style-outline-pink
 > .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: transparent;
	color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);

 &:hover,
 &:active,
 &.active {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--secondary);
 }

 &:focus,
 &.focus {
	 background-color: oklch( from var(--wp--preset--color--secondary) calc(l * .7) c h );
	 color: oklch( from var(--wp--preset--color--white) calc(l * .7) c h );
	 border-color: oklch( from var(--wp--preset--color--secondary) calc(l * .7) c h );
 }

 &:disabled,
 &[disabled],
 &.disabled {
	 background-color: #6e6e6e;
	 color: #fff;
	 border-color: #6e6e6e;
	 cursor: not-allowed;
	 pointer-events: all !important;
 }
}