@import 'variables';
@import 'px-navbar-sketch'; // TODO: This is the theme (colors);

:root{
  --px-navbar-background-color: var(--px-base-background-color, white);
  --px-navbar-title-color: var(--px-base-text-color, --px-view-header-title-color);
}

@include block ('navbar') {
	font-size       : $inuit-base-font-size;
	border-bottom   : $navbar-default-border-bottom;
	border-bottom   : var(--px-navbar-border-bottom, $navbar-default-border-bottom);
	background-color: var(--px-navbar-background-color, white);
	color           : var(--px-navbar-color, black);
	///-----------------------------------------------------------------
	///.navbar--transparent
	@include modifier ('transparent') {
		background-color: transparent;
		color           : $navbar-default-font-color;

		.navbar__button {
			color: $navbar-default-font-color;
		}
	}
	///-----------------------------------------------------------------
	///.navbar--shadow
	@include modifier ('shadow') {
		box-shadow: $navbar-default-box-shadow;
	}
	///-----------------------------------------------------------------
	//::content .navbar__button {
	@include c ('.navbar__button') {
		background-color: $navbar-button-background-color;
		color           : $navbar-button-color;
		border          : $navbar-button-border;
		border-radius   : $navbar-button-border-radius;
		font-size       : $navbar-button-font-size;
		color           : var(--px-base-text-color, $navbar-button-color);
		cursor          : pointer;

		> * {
			display   : flex;
			align-self: center;
		}

		&:active {
			background-color: $navbar-button-background-color--active;
			transition      : none;
			opacity         : $navbar-button-opacity--active;
		}
	}
	///-----------------------------------------------------------------
	@include element ('title') {
		font-size: $navbar-title-font-size;
		color    : var(--px-navbar-title-color, black);
	}
	///-----------------------------------------------------------------
	@include element ('subtitle') {
		font-size: $navbar-subtitle-font-size;
		color    : var(--px-navbar-subtitle-color, $navbar-subtitle-font-color);
	}
}