/* Needed components
@import '../../Atoms/link/_link.scss';
@import '../../Atoms/button-circle/_button-circle.scss';
*/

.rh-navigation-block {
	// Reset p tag's settings on global
	p { margin-bottom: 0; }

	/* Box-modell/beteende */
	min-height: $navigation-block--min-height;

	@if $navigation-block--width {
		width: $navigation-block--width;
	}

	@if $navigation-block--min-width {
		min-width: $navigation-block--min-width;
	}

	@if $navigation-block--max-width {
		max-width: $navigation-block--max-width;
	}

	@if $navigation-block--background-color {
		background-color: $navigation-block--background-color;
	}

	padding: $navigation-block--padding;

	/* Visuellt */
	@if $navigation-block--border {
		border: $navigation-block--border;
	}
	@if $navigation-block--border-radius {
		border-radius: $navigation-block--border-radius;
	}

	&__header {
		/* Box-modell/beteende */
		display: flex;
		align-items: flex-start;

		&-icon {
			@if $navigation-block__header-round-button--border {
				border: $navigation-block__header-round-button--border;
			}

			@if $navigation-block__header-round-button--background-color {
				background-color: $navigation-block__header-round-button--background-color;
			}

			@if $navigation-block__header-round-button--icon-color {
				color: $navigation-block__header-round-button--icon-color;
			}

			/* Blandat/övrigt */
			@if $navigation-block__header-round-button--cursor {
				cursor: $navigation-block__header-round-button--cursor;
			}

			@if $navigation-block__header-round-button--hover-active {
				&:hover, &:active, &:focus {
					@if $navigation-block__header-round-button--border-hover-active {
						border: $navigation-block__header-round-button--border-hover-active;
					}

					@if $navigation-block__header-round-button--background-color-hover-active
					{
						background-color: $navigation-block__header-round-button--background-color-hover-active;
					}

					@if $navigation-block__header-round-button--icon-color-hover-active {
						color: $navigation-block__header-round-button--icon-color-hover-active;
					}
				}
			}
		}

		&-title {
			/* Box-modell/beteende */
			margin: $navigation-block__header-title--margin;

            @if $navigation-block__header-title-link--color {
                color: $navigation-block__header-title-link--color;
            }

            font-size: $navigation-block__header-title-link--font-size;
            font-weight: $navigation-block__header-title-link--font-weight;
            line-height: $navigation-block__header-title-link--line-height;
            word-break: $navigation-block__header-title-link--word-break;

            @include large {
                margin: $navigation-block__header-title--margin-large;
                font-size: $navigation-block__header-title-link--font-size-large;
            }
		}
	}

	&__description {
		/* Box-modell/beteende */
		@if $navigation-block__description--margin {
			margin: $navigation-block__description--margin;
		}

		&-text {
			/* Typografi */
			@if $navigation-block__description-text--color {
				color: $navigation-block__description-text--color;
			}
		}
	}

	// Create the effects :active, :hover, :focus - :focus-within by using @mixin
	&--clickable {
        $navigationBlockClickableClassname: "rh-navigation-block--clickable"; //Main container's classname
        $navigationBlockIconClassname: "rh-navigation-block__header-icon";
        $navigationBlockTitleClassname: "rh-navigation-block__header-title";
        $navigationBlockDescriptionClassname: "rh-navigation-block__description-text";

		@include create-clickable-element-effect(
            $navigationBlockClickableClassname, //Container (box) classname
            $navigationBlockTitleClassname, //Title (or link) classname
			$navigationBlockDescriptionClassname, //Description classname
			$navigation-block-effect__box-outside, //Activating outside effect
			$navigation-block-effect__content-inside, //Activating inside effect
            $navigation-block-effect--border, // Box border-top styling
            $navigation-block-effect--border, // Box border-right styling
            $navigation-block-effect--border, // Box border-bottom styling
            $navigation-block-effect--border, // Box border-left styling
			$navigation-block-effect--box-shadow, // Box shadow styling
			$navigation-block-effect-focus--box-shadow, // Shadow when focus
            $navigation-block-effect--title-text-color, // Title text color
            $navigation-block-effect--title-text-decoration, //Title text decoration
            $navigation-block-effect--description-text-color, // Description text color
            $navigation-block-effect--description-text-decoration // Description text decoration
        ){
            // Create extend effect for icon
            @at-root .#{$navigationBlockClickableClassname}:hover,
                .#{$navigationBlockClickableClassname}:active {

                    @include create-icon-button-effect(
                        $navigationBlockClickableClassname,
                        $navigationBlockIconClassname,
                        $navigation-block__header-round-button--background-color-hover-active,
                        $navigation-block__header-round-button--icon-color-hover-active
                )
            }

            // Separate generation of :focus and focus-within for a better compatible with IE11 and Edge (old version)
            @at-root .#{$navigationBlockClickableClassname}:focus,
                .#{$navigationBlockClickableClassname}:focus-within {

                @include create-icon-button-effect(
                    $navigationBlockClickableClassname,
                    $navigationBlockIconClassname,
                    $navigation-block__header-round-button--background-color-hover-active,
                    $navigation-block__header-round-button--icon-color-hover-active
                )
            }
        }
	}
}