@use '../../../styles.scss';
@use '../../../themes/defaults';

.jse-contextmenu {
  box-shadow: defaults.$controls-box-shadow;

  font-family: defaults.$font-family;
  font-size: defaults.$font-size;
  background: defaults.$context-menu-background;
  color: defaults.$context-menu-color;

  .jse-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: stretch;

    div.jse-label {
      flex: 1;
      white-space: nowrap;
      padding: defaults.$padding;
      color: defaults.$context-menu-color-disabled;
      line-height: normal;
    }

    div.jse-tip {
      flex: 1;
      background: defaults.$context-menu-tip-background;
      color: defaults.$context-menu-tip-color;
      margin: styles.$padding-half;
      padding: styles.$padding-half defaults.$padding;
      font-size: 80%;
      line-height: 1.3em;

      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: defaults.$padding;
      border-radius: styles.$border-radius;

      div.jse-tip-icon {
        padding-top: styles.$padding-half;
      }
    }
  }

  .jse-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    &:not(:last-child) {
      border-right: 1px solid defaults.$context-menu-separator-color;
    }
  }

  .jse-separator {
    width: 100%;
    height: 1px;
    background: defaults.$context-menu-separator-color;
  }
}