/**
* @project: Console Art Cybernetic - https://cacybernetic.github.io
* @fileoverview: Console Art Cybernetic button stylesheet.
* @author: Obrymec - obrymecsprinces@gmail.com
* @supported: DESKTOP, MOBILE
* @created: 2023-08-03
* @updated: 2023-09-28
* @file: button.scss
* @version: 0.0.2
*/

// Custom dependencies.
@import "./_variables.scss";

// Flat Button.
button.flat-btn {
	display: inline-flex;
	align-items: center;
	column-gap: 5px;
	outline: none;
	// Hover effect.
	&:hover {
		// Move right arrow.
		img {
			transform: translateX(8px);
		}
		// Underline the text.
		span {
			text-decoration: underline;
			text-underline-offset: 4px;
		}
	}
	// Right arrow.
	img {
		display: inline-block;
	}
	// Text.
	span {
		color: $button-bg-color;
		line-height: 24px;
		font-weight: 600;
		font-size: 20px;
	}
}

// Hybrid button.
button.gen-btn {
	transition: all .3s cubic-bezier(.7, 0, .3, 1);
	background-color: $button-bg-color;
	justify-content: center;
  display: inline-flex;
	padding: 11px 16px;
	outline: none;
	// Hover effect.
	&:hover {
		background-color: $button-tr-bg;
		// Text.
		span {
			color: $button-bg-color;
		}
	}
	// Right icon.
	img {
		transform: translate(0, 1px);
		display: inline-block;
		margin-left: 8px;
	}
	// Text.
	span {
		transition: color .3s cubic-bezier(.7, 0, .3, 1);
		color: $button-text-color;
		line-height: 20px;
		font-weight: 600;
		font-size: 18px;
	}
}
