@import '../../assets/styles/fonts';

.ff-menu-option-container {
  cursor: pointer;
  position: relative;

  .ff-icon-label {
    display: flex;
    align-items: center;
    gap: 4px;
    .ff-menuicon-container {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover {
        background-color: var(--hover-color);
      }
    }

    .ff-menuicon-container-clicked {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--brand-color);
      cursor: pointer;
      &:hover {
        background-color: var(--brand-color);
      }
    }
  }

  .ff-option-card {
    position: absolute;
    border: 1px solid var(--option-card-border-color);
    background: var(--option-card-bg-color);
    border-radius: 4px;
    margin: 2px;
    min-height: 32px;
    min-width: 111px;
    z-index: 100000;
    white-space: nowrap;

    .ff-options {
      @extend .fontSm;
      cursor: pointer;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 8px;
      line-height: 16px;
      gap: 8px;
      &:hover {
        background-color: var(--hover-color);
      }
      label {
        cursor: pointer;
      }
    }

    .ff-disable-option {
      opacity: 0.5;
      cursor: no-drop;
      label {
        cursor: no-drop;
      }
    }
  }
}