@import '_theme.scss';

.profile{
    .profile-icon-container{
      margin-right: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;


      .profile-icon {
          stroke: var(--text-color-header);
			}

			.notification-icon {
				position: absolute;
				right: 18px;
				bottom: 4px;
				fill: var(--color-error);
			}
    }

	.dropdown-menu{
		width: 320px;
		z-index: 109;
		box-shadow: 0 4px 11px 0 rgba(0,0,0,0.5);
		margin-top: 8px;

		.dd-body{
			.dropdown-item{
				height: 40px;
				display: flex;
				align-items: center;
				font-size: var(--text-size-regular);
				color: var(--text-color-ultra-dark);
				padding: 0.25rem 1.5rem 0.25rem 20px;
				cursor: pointer;

				& a {
					text-decoration: none;
					color: inherit;
				}

				&.bold {
					font-weight: bold;
				}

				&.drafts{
					border-bottom: 1px solid var(--color-line);
				}
				&:hover{
					background-color: var(--color-fill);
				}
				&:focus,&:active {
					outline: none;
					box-shadow: none;
				}
			}
		}

		/* stretching the dropdown menu to width of the viewport*/
		@media (max-width: $lg) {
			position: fixed !important;
			width: 100vw;
			top: 27px !important;
			left: 83px !important;
			box-shadow: 0 23px 25px 0 rgba(0,0,0,0.5);
		}
	}
}
