/* dropdown */
phx-component-dropdown {
  &.disabled {
    color: @CLR_DISABLED_FONT;
  }
}

.phx-component-dropdown {
    width: @PHLOX_DROPDOWN_MIN_WIDTH;
    height: @PHLOX_DROPDOWN_MIN_HEIGHT;
    position: relative;

    >.dropdown{
    	height: 100%;

    	>div {
		    height: 100%;
		    width: 100%;
		    text-align: left;

		    &.label {
		        color: @CLR_FIXED_FONT;
		        font-size: 120%;
	            font-weight: normal;
	            padding: 0;
	      }
	 	  }

      >button {
        background-color: extract(@CLR_1, 9);
        border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid transparent;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        height: 100%;
        position: relative;

        &:focus {
          border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
        }

        >div{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;

          &.label-side {
            padding-left: @PHLOX_DROPDOWN_LABEL_PADDING_LEFT;
            padding-right: @PHLOX_DROPDOWN_LABEL_PADDING_RIGHT;
            display: flex;
            align-items: center;
          }

          &.arrow-side {
            text-align: right;
            padding-right: @PHLOX_DROPDOWN_ARROW_PADDING_RIGHT;

            >.flex-center {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            }
          }
        }
      }

    }

    >.menu{
      .phlox-box-shadow(@PHLOX_DROPDOWN_LIST_SHADOW_HLEN, @PHLOX_DROPDOWN_LIST_SHADOW_VLEN, @PHLOX_DROPDOWN_LIST_SHADOW_BLUR, @PHLOX_DROPDOWN_LIST_SHADOW_SPREAD);
    	background-color: extract(@CLR_1, 9);
    	position: absolute;
    	list-style-type: none;
    	z-index: 1;
    	width: 100%;
    	margin : 0;
    	padding: 0;
    	color: @CLR_FIXED_FONT;
    	font-size: @CONTEXT_MENU_FONT_SIZE;
    	display: none;

    	&show{
			display: block;
		}

    	>li{
    		border-bottom: @PHLOX_DROPDOWN_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    		padding: 5pt 10pt;
    		cursor:pointer;

			&:hover,
			&:focus {
			  background-color: extract(@CLR_BRAND_HUE, 6);
			}
    	}
    }

    .down-triangle {
        color: @CLR_FIXED_FONT;
    }
}