@import 'scss/font-family.scss';
@import 'theme/variables.scss';


.details-dropdown-popover {
  background-color: transparent;
}

.details-dropdown-container {
  width: 26px;
  height: 26px;
  border-radius: 2px;

  .dropdown-dots {
    cursor: pointer;
    svg {
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotate(0deg);
      fill: $grey;
      transition: transform 0.1s ease;
      path {
        fill: $grey;
      }
    }
  }

  &:hover {
    cursor: pointer;
    background-color: $black-5;
    .dropdown-dots {
      svg {
        path {
          fill: $black;
        }
      }
    }
  }

  &.active-drop {
    background-color: $black;

    &.rightRotation {
      .dropdown-dots {
        cursor: pointer;
        svg {
          transform: rotate(-90deg);
          path {
            fill: $white;
          }
        }
      }
    }

    &.leftRotation {
      .dropdown-dots {
        cursor: pointer;
        svg {
          transform: rotate(90deg);
          path {
            fill: $white;
          }
        }
      }
    }

    &:hover {
      background-color: $black;
      svg {
        path {
          fill: $white-3;
        }
      }
    }
  }
}

.dropdown-main-popover-body {
  position: relative;
  top: -4px;
  left: 4px;
  background-color: transparent;
  transition: transform 0.1s ease;
  animation: scaleItem 0.3s;
}

.details-dropdown-body {
  padding: 4px 4px 0.1px 4px;

  background-color: $black-2;
  border-radius: 3px;

  .action-holder {
    position: relative;
    height: 26px;
    margin-bottom: 4px;
    border-radius: 2px;
    user-select: none;

    .actionTitle {
      flex: 1;
      margin-right: 22px;
      margin-left: 5px;
      line-height: 18px;
      font-size: 14px;
      color: $white-2;
      font-family: $font-family;
    }

    .action-select-holder {
      position: relative;
      width: 100%;
      border-radius: 2px;
      min-height: 26px;
    }

    .actionIcon {
      height: 18px;
      width: 18px;
      margin-right: 5px;

      svg-icon {
        display: flex;
        align-items: center;
        transform: rotate(0deg);
        transition: transform 0.1s ease-in;
        svg {
          rect {
            fill: transparent;

            height: 17.1px;
            width: 17.1px;
          }

          path {
            height: 17.1px;
            width: 17.1px;
            fill: $grey-3;
          }
        }
      }

      &.redIcon {
        svg-icon {
          svg {
            path {
              fill: $red-3;
            }
          }
        }
      }

      &.blueIcon {
        svg-icon {
          svg {
            path {
              fill: $blue-3;
            }
          }
        }
      }

      &.greenIcon {
        svg-icon {
          svg {
            path {
              fill: $blue-3;
            }
          }
        }
      }

      &.arrowIcon {
        justify-content: right;
        svg-icon {
          display: flex;
          justify-content: right;
          svg {
            height: 14px;
            width: 14px;
            rect {
              height: 14px;
              width: 14px;
            }

            path {
              height: 14px;
              width: 14px;
            }
          }
        }
      }
    }

    &.leftIcon {
      .actionTitle {
        margin-right: 22px;
        margin-left: 30px;
      }

      .actionIcon {
        position: absolute;
        left: 0px;
        margin: 0px 5px;
      }
    }

    &:hover {
      cursor: pointer;
      background-color: $black-9;

      &.disabledAction {
        &.disabledActionMain {
          background-color: transparent;
        }

        &.subTypeHolder {
          cursor: pointer !important;
        }
      }

      .hoveredSubtype {
        background-color: $black-6 !important;
      }

      .actionTitle {
        color: $white-2;
      }

      .actionIcon {
        svg-icon {
          svg {
            path {
              fill: $white;
            }
          }
        }
      }

      .redIcon {
        svg-icon {
          svg {
            path {
              fill: $red-2;
            }
          }
        }
      }

      .blueIcon {
        svg-icon {
          svg {
            path {
              fill: $blue-2;
            }
          }
        }
      }

      .greenIcon {
        svg-icon {
          svg {
            path {
              fill: $green-2;
            }
          }
        }
      }
    }
  }

  .border-holder {
    .action-border-line {
      height: 1px;
      width: calc(100% - 8px);
      margin-bottom: 4px;

      background-color: $black-8;
      border-radius: 1px;
    }
  }

  .disabledAction {
    pointer-events: none !important;

    .actionTitle {
      color: $grey-2;
    }

    .actionIcon {
      svg-icon {
        svg {
          path {
            fill: $black-7;
          }
        }
      }
    }

    .redIcon {
      svg-icon {
        svg {
          path {
            fill: $red !important;
          }
        }
      }
    }

    .blueIcon {
      svg-icon {
        svg {
          path {
            fill: $blue !important;
          }
        }
      }
    }

    .greenIcon {
      svg-icon {
        svg {
          path {
            fill: $green !important;
          }
        }
      }
    }

    &:hover {
      .actionTitle {
        color: $grey-2;
      }

      .actionIcon {
        svg-icon {
          svg {
            path {
              fill: $black-7;
            }
          }
        }
      }
    }
    cursor: auto !important;
  }
}

@keyframes scaleItem {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}