@use '../../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-add-resource {
          box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
        }
      }
      &.dark {
        background-color: var(--brand-color);
        &:hover {
          background-color: var(--menu-variant-dark-icon-color);
          svg {
            path {
              fill: var(--brand-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);
      }
      &.dark {
        background-color: var(--menu-variant-dark-icon-color);
      }
    }
  }
}

.ff-option-card {
  position: absolute;
  margin: 4px;
  border: 1px solid var(--option-card-border-color);
  background: var(--option-card-bg-color);
  overflow: hidden;
  min-height: 32px;
  min-width: 110px;
  width: max-content;
  border-radius: 4px;
  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
  .ff-options {
    width: 100%;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 8px;
    &:hover {
      background-color: var(--hover-color);
    }
    label {
      cursor: pointer;
    }
    &.no_icon {
      justify-content: center;
    }

    &.align-left {
      justify-content: flex-start;
    }

    &.align-center {
      justify-content: center;
    }

    &.align-right {
      justify-content: flex-end;
    }
  }
  &--primary {
    background: var(--brand-color);
    color: var(--primary-button-text-color);
    svg {
      path {
        fill: var(--primary-icon-color);
      }
    }
    :hover {
      color: var(--brand-color);
      svg {
        path {
          fill: var(--brand-color);
        }
      }
    }
  }
  &--default {
    background: var(--brand-color);
    color: var(--primary-button-text-color);
    svg {
      path {
        fill: var(--primary-icon-color);
      }
    }
    :hover {
      color: var(--brand-color);
      svg {
        path {
          fill: var(--brand-color);
        }
      }
    }
    .ff-options {
      &:hover {
        background-color: var(--base-bg-color);
      }
    }
  }

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

.ff-menu-parent-hover {
  background-color: var(--hover-color) !important;
}