/**
 * 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: 0.5rem 1.6rem;
		min-height: 56px;

		&:hover {
			text-decoration: none;

			&::after {
				/* Move arrows for all buttons. */
				transform: translateX(0.3rem);
			}
		}

		&: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: #fff;
		color: #666;
		border-color: #AEB3B6;
		cursor: not-allowed;
		pointer-events: all !important;

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

/**
 *
 * 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: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);

	&:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);
	}

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

	&:focus,
	&.focus {
		background-color: var(--wp--preset--color--red--5);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);
		outline: none;
	}

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

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

/**
 *
 * Secondary fill button styles.
 *
 * 1. Defines styles for secondary fill 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-secondary
	> .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);

	&::after {
		content: '';
		display: inline-block;
		width: 1.375rem;
		height: 1.375rem;
		margin-left: 0.625rem;
		background-repeat: no-repeat;
		background-position: center center;
		transition: var(--transition);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	}

	&:hover {
		background-color: var(--wp--preset--color--red--140);
		color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--red--140);
	}

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

	&:focus,
	&.focus {
		background-color: var(--wp--preset--color--red--5);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);
	}

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

		&::after {
			content: '';
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='GhostWhite' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
			display: inline-block;
			width: 1.375rem;
			height: 1.375rem;
			margin-left: 0.625rem;
		}

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

/**
 *
 * Secondary outline button styles.
 *
 * 1. Defines styles for secondary 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-secondary-outline
	> .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);

	&::after {
		content: '';
		display: inline-block;
		width: 1.375rem;
		height: 1.375rem;
		margin-left: 0.625rem;
		background-repeat: no-repeat;
		background-position: center center;
		transition: var(--transition);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='%23CC0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	}

	&:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);

		&::after {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='%237A0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		}
	}

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

		&::after {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		}
	}

	&:focus,
	&.focus {
		background-color: var(--wp--preset--color--red--5);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);
		outline: none;

		&::after {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='%237A0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		}
	}

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

		&::after {
		 content: '';
		 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='GhostWhite' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		 display: inline-block;
		 width: 1.375rem;
		 height: 1.375rem;
		 margin-left: 0.625rem;
	 }

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

/**
 *
 * Secondary alt button styles.
 *
 * 1. Defines styles for alt fill 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-alt
> .wp-block-button__link:not(.has-text-color, .has-background) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);

	&::after {
		content: '';
		display: inline-block;
		width: 1.375rem;
		height: 1.375rem;
		margin-left: 0.625rem;
		background-repeat: no-repeat;
		background-position: center center;
		transition: var(--transition);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
 }

	&:hover {
		background-color: var(--wp--preset--color--red--80);
		color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--red--5);
	}

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

		&::after {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		}
	}

	&:focus,
	&.focus {
		background-color: var(--wp--preset--color--red--5);
		color: var(--wp--preset--color--red--140);
		border-color: var(--wp--preset--color--red--140);
		outline: none;
 }

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

	 &::after {
		 content: '';
		 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.54541 17L7.54541 11.5L1.54541 6.00001' stroke='GhostWhite' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
		 display: inline-block;
		 width: 1.375rem;
		 height: 1.375rem;
		 margin-left: 0.625rem;
	 }

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