@mixin action-menu-container() {
  position: absolute;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.03), 0px 4px 5px rgba(0, 0, 0, 0.24), 0px 1px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 10;
  overflow: hidden;
}

@mixin action-menu-item() {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: #FFFFFF;
  color: #4F4F4F;
  text-decoration: none;
  user-select: none;

  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  &:hover,
  &:focus-within {
    outline: none;
    text-decoration: none;
    color: #4F4F4F;
    background: #F4F9FD;
  }
}

.action-item {
  @include action-menu-item();
  padding: 8px 16px;

  &.active {
    background: #F4F9FD;

    &:hover,
    &:focus {
      background: #F4F9FD;
    }
  }

  span {
    word-break: break-all;

    &.action-item-truncate {
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: unset;
    }
  }
}

.action-item-checkbox {
  @include action-menu-item();
  padding: 0 16px;

  zen-checkbox {
    width: 100%;

    .checkbox-component {
      padding: 8px 0;
    }
  }
}

.action-item-radio {
  @include action-menu-item();
  padding: 0 16px;

  &.active {
    background: #F4F9FD;

    zen-radio {
      .radio-component {
        color: #4F4F4F;
      }  
    }
  }

  zen-radio {
    width: 100%;

    .radio-component {
      padding: 8px 0;

      .radio-input + label {
        padding: 0 0 0 28px !important;
      }
    }
  }
}

.action-menu {
  @include action-menu-container();

  &-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #ECECED;

    .title {
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }
  }

  &-body {
    padding: 8px 0;
  }

  &-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid #ECECED;
  }
}