@import '../styles/_colors.scss';
@import '../styles/_dimensions.scss';

$menu-width:450px;

.vui-menulist{
	position: relative;
	background-color: base-color(primary-white);
	display: inline-block;

	&-menu{
		list-style: none;
		margin: 0;
		padding: 0;

		display: flex;
		> li {
			margin-bottom: 0;
		}
	}
	&-menus{
		position: absolute;
		z-index: 900;

    box-sizing: border-box;
    position: absolute;
    padding: 0;
    margin: 0;
    background: base-color(primary-white);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    right: 0;
		width: $menu-width;
		display: none;

		> div{
      margin:0;
			padding:32px 0;
			
			display: none;

			&[data-visible="true"]{
				display: block;
			}
		}

		&[data-menuvisible="true"]{
			display: block;
		}
	}
}