@use "sass:map";

.vuiMenu {
  border: 1px solid var(--vui-color-border-medium);
  border-radius: $sizeXs;
  overflow: hidden;
}

.vuiMenuItem {
  display: block;
  width: 100%;
  padding: $sizeS $sizeL;
  text-decoration: none;
  text-align: left;
}

.vuiMenu--noBorder {
  border: none;
  border-radius: 0;

  .vuiMenuItem {
    padding: $sizeS $sizeM;
  }
}

.vuiMenuItem--clickable {
  cursor: pointer;
}

// Color
$color: (
  neutral: (
    "color": var(--vui-color-text),
    "background-color": var(--vui-color-primary-lighter-shade),
    "hover-color": var(--vui-color-primary-shade)
  ),
  primary: (
    "color": var(--vui-color-primary-shade),
    "background-color": var(--vui-color-primary-lighter-shade),
    "hover-color": var(--vui-color-primary-shade)
  ),
  danger: (
    "color": var(--vui-color-danger-shade),
    "background-color": var(--vui-color-danger-lighter-shade),
    "hover-color": var(--vui-color-danger-shade)
  )
);

@each $colorName, $colorValue in $color {
  .vuiMenuItem--#{$colorName} {
    color: #{map.get($colorValue, "color")};

    &.vuiMenuItem--clickable {
      &:hover {
        background-color: #{map.get($colorValue, "background-color")};

        .vuiMenuItem__title,
        .vuiMenuItem__text {
          color: #{map.get($colorValue, "hover-color")};
        }
      }
    }
  }
}

.vuiMenuItem__title {
  font-size: $fontSizeMedium;
  line-height: 1.4;
}

.vuiMenuItem__text {
  color: var(--vui-color-subdued-shade);
  font-size: $fontSizeSmall;
  line-height: 1.4;
}